全网整合营销服务商

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

免费咨询热线：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 


相关文章： 西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  佛山网站制作系统,佛山企业变更地址网上办理步骤？  网站制作公司广州有几家,广州尚艺美发学校网站是多少？  如何做静态网页,sublimetext3.0制作静态网页？  制作网站的软件免费下载,免费制作app哪个平台好？  股票网站制作软件,网上股票怎么开户？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  成都响应式网站开发,dw怎么把手机适应页面变成网页？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  如何高效利用亚马逊云主机搭建企业网站？  广东企业建站网站优化与SEO营销核心策略指南  建站之星安装后如何配置SEO及设计样式？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  建站之星官网登录失败？如何快速解决？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  网站制作培训多少钱一个月,网站优化seo培训课程有哪些？  如何在云服务器上快速搭建个人网站？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  如何在阿里云完成域名注册与建站？  如何快速生成橙子建站落地页链接？  如何在IIS7中新建站点？详细步骤解析  成都网站制作公司哪家好,四川省职工服务网是做什么用？  如何通过宝塔面板实现本地网站访问？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊？  如何通过建站之星自助学习解决操作问题？  太平洋网站制作公司,网络用语太平洋是什么意思？  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  定制建站价位费用解析与套餐推荐全攻略  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  东莞专业制作网站的公司,东莞大学生网的网址是什么？  制作企业网站建设方案,怎样建设一个公司网站？  网站制作的方法有哪些,如何将自己制作的网站发布到网上？  制作网站的公司有哪些,做一个公司网站要多少钱？  c# 在ASP.NET Core中管理和取消后台任务  建站主机功能解析：服务器选择与快速搭建指南  如何在云指建站中生成FTP站点？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  家庭服务器如何搭建个人网站？  网站制作免费,什么网站能看正片电影？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  宝塔新建站点报错如何解决？  高端云建站费用究竟需要多少预算？  建站之星伪静态规则如何正确配置？  制作宣传网站的软件,小红书可以宣传网站吗？  建站主机是否属于云主机类型？  全景视频制作网站有哪些,全景图怎么做成网页？  沈阳制作网站公司排名,沈阳装饰协会官方网站？  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  如何通过商城免费建站系统源码自定义网站主题？ 

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

您的项目需求

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

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