js改变style样式和css样式

最新推荐文章于 2024-07-22 14:26:01 发布

youyajie

最新推荐文章于 2024-07-22 14:26:01 发布

阅读量10w+

点赞数 10

分类专栏： javascript 文章标签： css stylesheet div button input javascript

本文链接：https://blog.csdn.net/youyajie/article/details/8046275

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Change.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <script language="javascript">
     function test4(event) {
	   if(event.value == "黑色") {
	      //获取div1
	      var div1 = document.getElementById('div1');
	      div1.style.backgroundColor="black";
	   }
	   if(event.value == "红色") {
	      //获取div1
	      var div1 = document.getElementById('div1');
	      div1.style.backgroundColor="red";
	   }
	 }
  </script>
</head>
<body>
  <div id="div1" style="width:400px; height:300px; background-color:red;">div1</div>
  <input type="button" value="黑色" οnclick="test4(this)"/>
  <input type="button" value="红色" οnclick="test4(this)"/>

  </body>
</html>

test4(this)代表当前的<input相当于把它看成一个对象。

再来看一下改变css样式，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Change1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="css/Change.css">
  <script language="javascript">
     function test4(event) {
	  //获取样式表中所有class选择器都获得
	  var ocssRules = document.styleSheets[0].rules;
	  //从ocssRules中取出你希望的class
	  var style1 = ocssRules[0];
	  if(event.value == "黑色") {
	      //window.alert(style1.style.backgroundColor);
	     style1.style.backgroundColor="black";
	  }else if(event.value == "红色") {
	      style1.style.backgroundColor="red";
	  }
	  
	 }
   </script>
</head>
<body>
  <div id="div1" class="style1">div1</div>
  <input type="button" value="黑色" οnclick="test4(this)"/>
  <input type="button" value="红色" οnclick="test4(this)"/>

  </body>
</html>

youyajie

关注

10
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
js改变style样式和css样式

js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下: Change.html --> function test4(event) { if(event.value == "黑色") { //获取div1
复制链接

扫一扫

专栏目录