So legen Sie den Schrifteffekt in Javascript fest-js-Tutorial-php.cn

So legen Sie den Schrifteffekt in Javascript fest

醉折花枝作酒筹

Freigeben： 2021-06-10 10:12:14

Original

3612 Leute haben es durchsucht

In Javascript können Sie das Stilattribut verwenden, um den Schrifteffekt festzulegen. Das Syntaxformat lautet „object.style.property=Eigenschaftswert“. Ein Style-Objekt stellt eine einzelne Stildeklaration dar. Auf das Style-Objekt kann über das Dokument oder Element zugegriffen werden, auf das der Stil angewendet wird.

So legen Sie den Schrifteffekt in Javascript fest

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

<%@ 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>

Nach dem Login kopieren

In vielen Fällen ist es notwendig, die Stile von Elementen auf Webseiten dynamisch zu ändern. JavaScript bietet verschiedene Möglichkeiten, Stile dynamisch zu ändern. Die Verwendung, Auswirkungen und Mängel der Methoden werden im Folgenden vorgestellt.

1. Verwenden Sie obj.className, um den Klassennamen des Stylesheets zu ändern.

2. Verwenden Sie obj.style.cssTest, um eingebettetes CSS zu ändern.

3. Verwenden Sie obj.className, um den Klassennamen des Stylesheets zu ändern.

4. Verwenden Sie die externe CSS-Datei, um das CSS des Elements zu ändern

[Lernempfehlung: Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonSo legen Sie den Schrifteffekt in Javascript fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!