关于javascript获取内联样式与嵌入式样式的实例


Posted in Javascript onJune 01, 2017

通过style属性设置背景图案

<!--html-->
<div id="change">
change color
</div>
/*css*/
#change {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
    }
//js
change.style.backgroundColor="purple";

关于javascript获取内联样式与嵌入式样式的实例

在侧边栏设置一个颜色选择器,将change的背景颜色设置为选择的颜色,此时颜色选择器的颜色是使用内联样式的方式添加的。

关于javascript获取内联样式与嵌入式样式的实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 220px;
      height: 200px;
      position: absolute;
      top: 300px;
      left: -172px;
    }

    .open-close {
      height: 45px;
      width: 48px;
      background: url("open-close.png") no-repeat;
      background-size: contain;
      border: 1px solid grey;
      border-left: none;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }

    .changer {
      height: 150px;
      width: 170px;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid grey;
      text-align: center;
      padding-top: 8px;
    }

    .list > li {
      display: block;
      width: 36px;
      height: 36px;
      float: left;
      margin-left: 9%;
      margin-top: 10%;
    }

    #change {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>
<div class="wrap" id="wrap">
  <!--html-->
  <div class="open-close" id="open"></div>
  <div class="changer">
    <span>颜色选择器</span>
    <ul class="list">
      <li class="color-orange" style="background-color: orange"></li>
      <li class="color-red" style="background-color: red"></li>
      <li class="color-blue" style="background-color: blue"></li>
      <li class="color-black" style="background-color: black"></li>
      <li class="color-green" style="background-color: green"></li>
      <li class="color-pink" style="background-color: pink"></li>
    </ul>
  </div>
</div>
<div id="change">
  change color
</div>
<script>
  var open = document.getElementById("open");
  var wrap = document.getElementById("wrap");
  var list = document.getElementById("list");
  var change = document.getElementById("change");
  var color_change = document.getElementsByTagName("li");
  change.style.backgroundColor = "purple";
  open.onmouseover = function () {
    wrap.style.left = 0 + "px";

  };
  open.onclick = function () {
    wrap.style.left = -172 + "px";
  };
  for (var i = 0; i < color_change.length; i++) {
    color_change[i].id = i;
    color_change[i].onclick = function () {
      change.style.backgroundColor = color_change[this.id].style.backgroundColor;
    }
  }
</script>
</body>
</html>

问题:

当颜色选择器的颜色是使用嵌入式或者外部引入的方式添加时,javascript的style属性无效,获取不到颜色值。

解决方法:

javascript的style属性只能获取内联样式,对于外部引入样式和嵌入式样式需要用currentStyle属性。但是,currentStyle在Firefox和Chrome下不支持,需要使用如下兼容性代码:

HTMLElement.prototype.__defineGetter__("currentStyle", function () {
      return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      width: 220px;
      height: 200px;
      position: absolute;
      top: 300px;
      left: -172px;
    }
    .open-close {
      height: 45px;
      width: 48px;
      background: url("open-close.png") no-repeat;
      background-size: contain;
      border: 1px solid grey;
      border-left: none;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }
    .changer {
      height: 150px;
      width: 170px;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid grey;
      text-align: center;
      padding-top: 8px;
    }
    .list > li {
      display: block;
      width: 36px;
      height: 36px;
      float: left;
      margin-left: 9%;
      margin-top: 10%;
    }
    .color-orange {
      background-color: orange;
    }
    .color-red {
      background-color: red;
    }
    .color-blue {
      background-color: blue;
    }
    .color-blank {
      background-color: black;
    }
    .color-green {
      background-color: green;
    }
    .color-pink {
      background-color: pink;
    }
    #change {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>
<div class="wrap" id="wrap">
  <!--html-->
  <div class="open-close" id="open"></div>
  <div class="changer">
    <span>颜色的选择</span>
    <ul class="list">
      <li class="color-orange"></li>
      <li class="color-red"></li>
      <li class="color-blue"></li>
      <li class="color-blank"></li>
      <li class="color-green"></li>
      <li class="color-pink"></li>
    </ul>
  </div>
</div>
<div id="change">
change color
</div>
<script>
  HTMLElement.prototype.__defineGetter__("currentStyle", function () {
    return this.ownerDocument.defaultView.getComputedStyle(this, null);
  });
  var open = document.getElementById("open");
  var wrap = document.getElementById("wrap");
  var list = document.getElementById("list");
  var change = document.getElementById("change");
  var color_change = document.getElementsByTagName("li");
  change.style.backgroundColor="purple";
  open.onmouseover = function () {
    wrap.style.left = 0 + "px";

  };
  open.onclick = function () {
    wrap.style.left = -172 + "px";
  };

  for (var i = 0; i < color_change.length; i++) {
    color_change[i].id = i;
    color_change[i].onclick = function () {
      change.style.backgroundColor = color_change[this.id].currentStyle.backgroundColor;
    }
  }
</script>
</body>
</html>

关于javascript获取内联样式与嵌入式样式的实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
react-router中的属性详解
Jun 01 #Javascript
javascript 数据存储的常用函数总结
Jun 01 #Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 #Javascript
详解基于webpack搭建react运行环境
Jun 01 #Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 #Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 #Javascript
You might like
php下连接mssql2005的代码
2011/01/17 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
python在非root权限下的安装方法
2018/01/23 Python
10个Python小技巧你值得拥有
2018/09/29 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python是什么 Python的用处
2020/05/26 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
自我鉴定思想方面
2013/10/07 职场文书
报社实习生自荐信
2014/01/24 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
海飞丝广告词
2014/03/20 职场文书
大学生自我评价范文
2015/03/03 职场文书
新郎新娘致辞
2015/07/31 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
字节飞书面试promise.all实现示例
2022/06/16 Javascript
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android