js设置css（js设置css宽度）

简介：

JS（JavaScript）作为一种脚本语言，可以与CSS（Cascading Style Sheets）相互配合，实现对网页样式的控制。本文将讲解如何使用JS设置CSS样式。

一、内联样式设置

使用JS来设置内联样式，可以直接在HTML元素内部添加样式属性，如下：

document.getElementById("demo").style.fontSize = "25px";

其中，getElementById()方法获取需要设置样式的元素，style.fontSize表示样式属性名，25px为样式属性值。通过这种方式可以轻松地设置内联样式。

二、外部样式设置

在外部样式表中设置样式，需要先获取该样式表，然后使用insertRule()方法添加新样式规则，示例代码如下：

var sheet = document.createElement('style');

sheet.innerHTML = "h1 { color: red; }";

document.head.appendChild(sheet);

该代码将添加一个样式规则，指定h1元素颜色为红色。需要注意的是，使用这种方式添加的样式会优先级高于HTML中的内联样式。

三、class样式设置

JS还可以设置class样式。需要先定义好相应的class样式，通过getElementById()方法获取需要设置的元素，然后使用className属性添加class样式。示例代码如下：

document.getElementById("demo").className = "test";

该代码将给元素添加class样式“test”。

四、hover样式设置

我们经常需要设置元素在鼠标划过时的样式。使用addEventListener()方法可以给元素添加鼠标移入和移出的事件监听器，从而实现hover样式设置。示例代码如下：

document.getElementById("demo").addEventListener("mouseover", function(){

this.style.backgroundColor = "yellow";

});

document.getElementById("demo").addEventListener("mouseout", function(){

this.style.backgroundColor = "";

});

该代码将在鼠标移入时将元素背景色设置为黄色，在鼠标移出时恢复原样式。

总结：

使用JS设置CSS样式，可以使我们更加灵活地控制网页的样式效果。我们可以通过内联样式、外部样式、class样式和hover样式等方式来实现对网页样式的完美控制。