ホームページ > 記事 > ウェブフロントエンド > JavaScriptでフォント効果を設定する方法
JavaScriptでフォント効果を設定する方法
- 醉折花枝作酒筹オリジナル
- 2021-06-10 10:12:143575ブラウズ
JavaScript では、style 属性を使用してフォント効果を設定できます。構文形式は「object.style.property=プロパティ値」です。 Style オブジェクトは、単一のスタイル宣言を表します。 Style オブジェクトには、スタイルが適用されているドキュメントまたは要素からアクセスできます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function over(obj){
obj.style.backgroundColor="blue";
obj.style.color="white";
}
function out(obj){
obj.style.backgroundColor="";
obj.style.color="";
}
function win(){
p1.style.fontWeight="Bold";//粗体
p2.style.fontStyle="Italic";//斜体
p3.style.textDecoration="underline";//下划线
p4.style.textDecoration="line-through";//删除线
}
function qs(){
p1.style.fontWeight="normal";
p2.style.fontStyle="normal";
p3.style.textDecoration="none";
p4.style.textDecoration="none";
}
</script>
</head>
<body οnlοad="win();">
<table border="1" cellspacing="0" width="234" height="77">
<tr align="center" id="t1" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
<td width="52"> </td>
<td width="65">商品</td>
<td width="95">价格（元）</td>
</tr>
<tr align="center" id="t2" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
<td>A 商场</td>
<td>S 商品</td>
<td>100</td>
</tr>
<tr align="center" id="t3" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
<td>B 商场</td>
<td>S 商品</td>
<td>80</td>
</tr>
</table>
<p id="p1">阿帕奇</p>
<p id="p2">阿帕奇</p>
<p id="p3">阿帕奇</p>
<p id="p4">阿帕奇</p>
<p id="p5" οnmοusemοve="qs();">鼠标移到此处撤销 阿帕奇样式</p>
<p id="p6">阿帕奇</p>
</body>
</html>多くの場合、Web ページ上の要素のスタイルを動的に変更する必要があります。 JavaScript には動的にスタイルを変更する方法がいくつか用意されており、その使い方、効果、欠点などを以下に紹介します。
1. obj.className を使用して、スタイル シートのクラス名を変更します。
2. obj.style.cssTest を使用して、埋め込み CSS を変更します。
3. obj.className を使用して、スタイル シートのクラス名を変更します。
4. 外部 CSS ファイルを使用して要素の CSS を変更する
#[推奨学習:JavaScript 上級チュートリアル ]
以上がJavaScriptでフォント効果を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。