如何用JS来改变CSS属性?

JavaScript09

如何用JS来改变CSS属性?,第1张

通过js来改变CSS属性,使用jQuery可以很方便的实现,像这样:

$("img").css('border-color','red')

就可以把边框颜色都变成红色。

这是针对此问题的测试页面

2、这是3张图片

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=975878983,2392470128&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=61343736,951557457&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg'>

3、这是图片的样式,边框默认为灰色。

img{

max-width:200px

border-color:gray

border-width:10px

border-style:solid

}

4、现在通过这几行用到jQuery的代码,控制图片边框根据鼠标移入移出边框变灰和变红。

$(function(){

$("img").on('mouseover',function(){

$(this).css('border-color','red')

}).on('mouseout',function(){

$(this).css('border-color','gray')

})

})

5、效果如图

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”成功了。