首頁 > web前端 > js教程 > javascript如何設定字體效果

javascript如何設定字體效果

醉折花枝作酒筹
發布: 2021-06-10 10:12:14
原創
3663 人瀏覽過

在javascript中,可以使用style屬性設定字體效果,語法格式「物件.style.屬性=屬性值」。 Style物件代表一個單獨的樣式聲明。可從套用樣式的文件或元素存取Style物件。

javascript如何設定字體效果

本教學操作環境:windows7系統、javascript1.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>
登入後複製

在許多情況下,都需要對網頁上元素的樣式進行動態的修改。在JavaScript中提供幾種方式動態的修改樣式,以下將介紹方法的使用、效果、以及缺陷。

1、使用obj.className來修改樣式表的類別名稱。

2、使用obj.style.cssTest來修改嵌入式的css。

3、使用obj.className來修改樣式表的類別名稱。

4、使用更改外聯的css文件,從而改變元素的css

【推薦學習:javascript高階教學

以上是javascript如何設定字體效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板