UDN-企业互联网技术人气社区

板块导航

浏览  : 1061
回复  : 4

[原生js] js改变style样式和css样式的简单实例

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-11 14:11:38 | 显示全部楼层 |阅读模式
  下面小编就为大家带来一篇js改变style样式和css样式的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <title>Change.html</title>
  5.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.   
  7.   <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  8. <script language="JavaScript">
  9.    function test4(event) {
  10.           if(event.value == "黑色") {
  11.            //获取div1
  12.            var div1 = document.getElementById('div1');
  13.            div1.style.backgroundColor="black";
  14.           }
  15.           if(event.value == "红色") {
  16.            //获取div1
  17.            var div1 = document.getElementById('div1');
  18.            div1.style.backgroundColor="red";
  19.           }
  20.          }
  21. </script>
  22. </head>
  23. <body>
  24. <div id="div1" style="width:400px; height:300px; background-color:red;">div1</div>
  25. <input type="button" value="黑色" onclick="test4(this)"/>
  26. <input type="button" value="红色" onclick="test4(this)"/>

  27. </body>
  28. </html>
复制代码

  test4(this)代表当前的<input相当于把它看成一个对象。
  
  再来看一下改变css样式,代码如下:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <title>Change1.html</title>
  5.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.   
  7.   <link rel="stylesheet" type="text/css" href="css/Change.css">
  8. <script language="JavaScript">
  9.    function test4(event) {
  10.          //获取样式表中所有class选择器都获得
  11.          var ocssRules = document.styleSheets[0].rules;
  12.          //从ocssRules中取出你希望的class
  13.          var style1 = ocssRules[0];
  14.          if(event.value == "黑色") {
  15.            //window.alert(style1.style.backgroundColor);
  16.            style1.style.backgroundColor="black";
  17.          }else if(event.value == "红色") {
  18.            style1.style.backgroundColor="red";
  19.          }
  20.          
  21.          }
  22.   </script>
  23. </head>
  24. <body>
  25. <div id="div1" class="style1">div1</div>
  26. <input type="button" value="黑色" onclick="test4(this)"/>
  27. <input type="button" value="红色" onclick="test4(this)"/>

  28. </body>
  29. </html>
复制代码

  以上就是小编为大家带来的js改变style样式和css样式的简单实例全部内容了,希望大家多多支持~

相关帖子

发表于 2017-1-11 14:12:07 | 显示全部楼层
又见楼主分享帖子
使用道具 举报

回复

发表于 2017-1-11 14:12:07 | 显示全部楼层
貌似看过类似的文章恩,排版更清晰点就更好了
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部