关于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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
详解vuejs之v-for列表渲染
Jun 22 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
实战node静态文件服务器的示例代码
Mar 08 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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
咖啡与水的关系
2021/03/03 冲泡冲煮
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python实现随机梯度下降法
2020/03/24 Python
python调用接口的4种方式代码实例
2019/11/19 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
廉政教育心得体会
2014/01/01 职场文书
搞笑老公保证书
2015/02/26 职场文书
民事起诉书范本
2015/05/19 职场文书
同乡会致辞
2015/07/30 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
导游词之无锡梅园
2019/11/28 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis