Comment changer la valeur de l'attribut CSS dans js

Méthodes pour modifier les valeurs des attributs CSS : 1. Utilisez l'instruction "document.getElementById(id value).className=string;" 2. Utilisez "document.getElementById(id value).style.attribute ; nom =valeur;" modification de l'instruction.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

1. Utilisez JS pour modifier la valeur de l'attribut de classe de la balise :

L'attribut de classe est l'un des moyens de référencer une feuille de style sur la balise, et sa valeur est un sélecteur de feuille de style, si la valeur de l'attribut class est modifiée, la feuille de style référencée par la balise sera également modifiée, c'est donc la première méthode de modification.

Le code pour changer l'attribut de classe d'une balise est :

document.getElementById(id值).className = 字符串;

document.getElementById( id ) est utilisé pour obtenir l'objet DOM correspondant à la balise. Vous pouvez également utiliser d'autres méthodes pour. l'obtenir. className est une propriété de l'objet DOM qui correspond à l'attribut de classe de l'étiquette. String est la nouvelle valeur de l'attribut class, qui doit être un sélecteur CSS défini.

En utilisant cette méthode, vous pouvez remplacer la feuille de style CSS de la balise par une autre, ou vous pouvez appliquer le style spécifié à une balise à laquelle aucun style CSS n'est appliqué.

Exemple :

<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">欢迎光临！</div>
<p><button onclick="setClass()">更改样式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>

2 Utilisez JS pour modifier la valeur de l'attribut de style de la balise :

L'attribut de style est également l'un des moyens. pour référencer la feuille de style sur la balise One, sa valeur est une feuille de style CSS. L'objet DOM a également un attribut de style, mais cet attribut lui-même est également un objet. Les attributs de l'objet Style correspondent un à un aux attributs CSS. Lorsque les attributs de l'objet Style sont modifiés, la valeur de l'attribut CSS de. la balise correspondante changera également, c'est donc la deuxième méthode de modification.

Le code pour modifier les propriétés CSS d'une balise est :

document.getElementById( id ).style.属性名 = 值;

document.getElementById( id ) est utilisé pour obtenir l'objet DOM correspondant à la balise. Vous pouvez également utiliser. d'autres méthodes pour l'obtenir. le style est une propriété de l'objet DOM, qui est lui-même un objet. Le nom de la propriété est le nom de la propriété de l'objet Style, qui correspond à une certaine propriété CSS.

Remarque : Cette méthode modifie une seule propriété CSS. Elle n'affecte pas les valeurs des autres propriétés CSS sur l'étiquette.

Exemple :

<div id="t2">欢迎光临！</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">颜色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">边框</button>
</p>

<script type="text/javascript">
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>

Méthode :

Quels sont tous les attributs dans document.getElementById("xx").style.xxx

盒子标签和属性对照
CSS语法（不区分大小写）	JavaScript语法（区分大小写）
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
float	floatStyle
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
颜色和背景标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color
样式标签和属性对照
CSS语法（不区分大小写）	JavaScript 语法（区分大小写）
display	display
list-style-type	listStyleType
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style	listStyle
white-space	whiteSpace
文字样式标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
font	font
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight
文本标签和属性对照
CSS 语法（不区分大小写）	JavaScript 语法（区分大小写）
letter-spacing	letterSpacing
line-break	lineBreak
line-height	lineHeight
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-justify	textJustify
text-transform	textTransform
vertical-align	verticalAlign

[Apprentissage recommandé : Tutoriel JavaScript avancé]

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!