Maison > Article > interface Web > Comment définir l'effet de police en javascript

Comment définir l'effet de police en javascript

醉折花枝作酒筹original: 2021-06-10 10:12:143574parcourir

En JavaScript, vous pouvez utiliser l'attribut style pour définir l'effet de police, le format de syntaxe est "object.style.property=property value". Un objet Style représente une déclaration de style unique. L'objet Style est accessible à partir du document ou de l'élément auquel le style est appliqué.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur 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>

Dans de nombreux cas, il est nécessaire de modifier dynamiquement les styles des éléments sur les pages Web. JavaScript propose plusieurs façons de modifier dynamiquement les styles. L'utilisation, les effets et les défauts des méthodes seront présentés ci-dessous.

1. Utilisez obj.className pour modifier le nom de classe de la feuille de style.

2. Utilisez obj.style.cssTest pour modifier le CSS intégré.

3. Utilisez obj.className pour modifier le nom de classe de la feuille de style.

4. Utilisez le fichier CSS externe pour modifier le CSS de l'élément

[Apprentissage recommandé : Tutoriel avancé JavaScript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css 对象样式表

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles sont les caractéristiques de base de javascriptArticle suivant：Quelles sont les caractéristiques de base de javascript

Articles Liés

Voir plus