Home >Web Front-end >JS Tutorial >How to set font effect in javascript
How to set font effect in javascript
- 醉折花枝作酒筹Original
- 2021-06-10 10:12:143658browse
In JavaScript, you can use the style attribute to set the font effect, the syntax format is "object.style.property=property value". A Style object represents a single style declaration. The Style object can be accessed from the document or element to which the style is applied.
The operating environment of this tutorial: windows7 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>In many cases, it is necessary to dynamically modify the styles of elements on the web page. JavaScript provides several ways to dynamically modify styles. The use, effects, and flaws of the methods will be introduced below.
1. Use obj.className to modify the class name of the style sheet.
2. Use obj.style.cssTest to modify embedded css.
3. Use obj.className to modify the class name of the style sheet.
4. Use the external css file to change the element’s css
[Recommended learning: javascript advanced tutorial]
The above is the detailed content of How to set font effect in javascript. For more information, please follow other related articles on the PHP Chinese website!