js如何修改样式？

JavaScript0140

js如何修改样式？,第1张

这样应该是不行的吧，或者是我还不会，而且要修改的话直接去css文件修改就好了，如果用js修改的话可以添加新的样式覆盖原来的样式，直接修改类名的话会使得操作复杂度加深，无法很好得进行维护。

js是无法直接修改css文件的，但可以通过取对象的方式修改对象的样式，通常有两种方法：\x0d\x0a1、改变className，但首先在样式表中预设定样式类。\x0d\x0a例如：document.getElementById('obj').className='...'\x0d\x0a2、改变cssText。\x0d\x0a例如：document.getElementById('obj').style.height='100px'

js通过class改变样式，可以使用Dom的className属性设置元素的样式。完整示例代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试页面</title>

<style type="text/css">

.themeCls {

color: #000

background-color: #f60

line-height: 25px

}

</style>

</head>

<body style="background-color:#ccc">

<span id="theme">这是一段测试文本<br />用来测试js通过class改变样式</span>

<script type="text/javascript">

var domTheme = document.getElementById("theme")

theme.className = "themeCls"

</script>

</body>

</html>

具体操作步骤如下：

1、新建一个html文件，命名为t.html。

2、打开t.html。

3、在t.html中写入html结构代码，其中设置需要添加class类的元素的ID为“theme”。代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试页面</title>

</head>

<body style="background-color:#ccc">

<span id="theme">这是一段测试文本<br />用来测试js通过class改变样式</span>

</body>

</html>

4、设置一个css类，命名为”themeCls”，用于在javascript操作时给元素添加clsss。”themeCls”类为了方便观察效果，设置css规则为字体颜色为黑色#000，背景为橙色#f60，行高为25像素。代码如下：

<style type="text/css">

.themeCls {

color: #000

background-color: #f60

line-height: 25px

}

</style>

5、编写javascript代码，获取ID为“theme”的元素并设置元素的class类为“themeCls”，代码如下：

<script type="text/javascript">

var domTheme = document.getElementById("theme")

domTheme .className = "themeCls"

</script>

6、打开浏览器，浏览t.html页面，发现页面中”这是一段测试文本用来测试js通过class改变样式”这一段文本字体颜色呈现黑色，背景呈现橙色，说明我们为元素添加class类“themeCls”成功了。