全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-708-3566

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

通过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";

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


<!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获取内联样式  # 嵌入式C实战项目开发技巧:对一个有规律的数组表进行位移操作的方法  # 嵌入式项目使用C语言结构体位段特性实现断言宏校验数据范围有效性的方法  # JS实现PC手机端和嵌入式滑动拼图验证码三种效果  # JavaScript基本的输出和嵌入式写法教程  # javascript动态添加样式(行内式/嵌入式/外链式等规则)  # 嵌入式C语言查表法在项目中的应用  # 选择器  # 不支持  # 设置为  # 解决方法  # 需要用  # 大家多多  # UTF  # br  # title  # head  # purple  # en  # lang  # DOCTYPE  # charset  # meta  # left  # close  # open  # top 


相关文章： 学校免费自助建站系统：智能生成+拖拽设计+多端适配  建站与域名管理如何高效结合？  企业微网站怎么做,公司网站和公众号有什么区别？  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  台州网站建设制作公司,浙江手机无犯罪记录证明怎么开？  无锡营销型网站制作公司,无锡网选车牌流程？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  建站主机是否等同于虚拟主机？  建站168自助建站系统：快速模板定制与SEO优化指南  如何选择高效可靠的多用户建站源码资源？  浅析上传头像示例及其注意事项  武汉网站制作费用多少,在武汉武昌，建面100平方左右的房子，想装暖气片，费用大概是多少啊？  nginx修改上传文件大小限制的方法  建站之星北京办公室：智能建站系统与小程序生成方案解析  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  如何通过主机屋免费建站教程十分钟搭建网站？  C#如何序列化对象为XML XmlSerializer用法  如何选择适配移动端的WAP自助建站平台？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  如何在阿里云虚拟主机上快速搭建个人网站？  ,巨量百应是干嘛的？  如何有效防御Web建站篡改攻击？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  个人摄影网站制作流程,摄影爱好者都去什么网站？  高端企业智能建站程序：SEO优化与响应式模板定制开发  微信小程序 五星评分(包括半颗星评分)实例代码  设计网站制作公司有哪些,制作网页教程？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？  建站主机解析：虚拟主机配置与服务器选择指南  如何在阿里云部署织梦网站？  如何构建满足综合性能需求的优质建站方案？  网站制作新手教程,新手建设一个网站需要注意些什么？  Python多线程使用规范_线程安全解析【教程】  建站之星在线版空间：自助建站+智能模板一键生成方案  如何在建站之星绑定自定义域名？  建站之星如何防范黑客攻击与数据泄露？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  自助网站制作软件,个人如何自助建网站？  小型网站制作HTML,*游戏网站怎么搭建？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  网站专业制作公司有哪些,做一个公司网站要多少钱？  如何快速重置建站主机并恢复默认配置？  如何选择建站程序？包含哪些必备功能与类型？  网站制作的步骤包括,正确网址格式怎么写？  公司网站的制作公司,企业网站制作基本流程有哪些？  中山网站推广排名,中山信息港登录入口？  如何用wdcp快速搭建高效网站？ 

返回目录 在线咨询
上一篇：专业打造企业形象：一站式网站制作服务解析
下一篇：Golang如何在Kubernetes中实现服务发现_Golang 服务发现与管理实践

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

©  云南转妮洋科技有限公司 版权所有   滇ICP备2024034437号 
联系电话： 400-708-3566   E-mail：915688610@qq.com
主营业务：网络营销推广、网站SEO优化、网站定制、营销型网站建设、微商城制作、三级分销系统开发
电话沟通
在线客服