关于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 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
原生js实现分页效果
Sep 23 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
屏蔽浏览器缓存另类方法
2006/10/09 PHP
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
golang与PHP输出excel示例
2016/07/22 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python为什么要安装到c盘
2020/07/20 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
药品采购员岗位职责
2014/02/08 职场文书
《雾凇》教学反思
2014/02/17 职场文书
银行求职信范文
2014/05/26 职场文书
公司辞职信模板
2015/05/13 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang