首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

关于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获取内联样式与嵌入式样式的实例

- Author -

你期待的花开

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
跨浏览器开发经验总结（三）   警惕“IE依赖综合症”
May 13 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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
对讲机(1) R72E(1) win10(43) i7 6700(1) DE1102(1) GTX1660(1) React(6) R71E(1) i5 9400(1) ICOM(2)
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
文字幻灯片
2006/06/26 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
Nodejs极简入门教程（三）：进程
2014/10/27 NodeJs
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
从零学习node.js之文件操作（三）
2017/02/21 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
iconfont的三种使用方式详解
2018/08/05 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python线程池threadpool实现篇
2018/04/27 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python with (as)语句实例详解
2020/02/04 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
任意一块网页内容实现“活”的背景（目前火狐浏览器专有）
2014/05/07 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
宿舍打麻将检讨书
2014/01/24 职场文书
消防安全检查制度
2014/02/04 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书