JavaScript语法

  • 更新时间:
  • 3085人关注
  • 点击下载

这是一个不错的JavaScript类学习资源,由卢铃语 提供,主要知识点是关于JavaScript语法、JavaScript、JavaScript的内容,已被567人关注,同类资源中评分为8.1分。

精选笔记:关于javascript获取内联样式与嵌入式样式的实例

9小时42分钟前回答

通过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" ></li>
      <li class="color-red" ></li>
      <li class="color-blue" ></li>
      <li class="color-black" ></li>
      <li class="color-green" ></li>
      <li class="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获取内联样式与嵌入式样式的实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

展开阅读

相关资源

  • 完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程

    完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程

    完美图解物联网技术系列》图书是当前物联网开发技术应用的集大成者。本书内容以Arduino和JavaScript为主线,开发物联网应用、手机App和操控微电脑

    大小:60.8 MB物联网

    立即下载
  • JavaScript基础教程

    JavaScript基础教程

    本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式

    大小:14 MBJS教程

    立即下载
  • JavaScript ES6函数式编程入门经典

    JavaScript ES6函数式编程入门经典

    本书使用JavaScript ES6带你学习函数式编程。你将学习柯里化、偏函数、高阶函数以及Monad等概念。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    大小:46.3 MBJavaScript

    立即下载
  • JavaScript for PHP Developers

    JavaScript for PHP Developers

    大小:27.4 MBJavaScript

    立即下载
  • JavaScript教程

    JavaScript 是前端开发者使用的主要编程语言,随着前端技术的发展,这门语言的边界也得以不断扩展。我们在这里选择了与 JavaScript 相关的经典文章,可以让大家对如何学习这门语言有一些全面的认识。特别的,我们还着重于 JavaScript 这门语言与其它编程语言的不同之处,方便大家深入理解。

    大小:5.5 MBJavaScript

    立即下载
  • JavaScript编程精解

    JavaScript编程精解

    JavaScript编程精解(原书第2版) 的第2版经过全面的更新和修订,覆盖了JavaScript的绝大多数语言特性,涉及Web编程和Node.js服务器编程,以及JavaScript性能优化等。《JavaScript编程精解(原书第2版)》的

    大小:96.4 MBJavaScript

    立即下载

学习笔记

19小时27分钟前回答

JavaScript实现图片拖曳效果

本文实例为大家分享了js实现图片拖曳效果的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title style #pbox{ width: 100%; height:100%; } #box{ width: 200px; height: 200px; background:red; position: absolute; } /style/headbodyinput type="button" id="btn" value="随机生成"div id="pbox"div id="box"/div/div/bodyscript var btn=document.getElementById("btn");//获取按钮 var box=document.getElementById("box");//获取box var pbox=document.getElementById("pbox");//获取pbox var arr=['#fff143','#ff7500','#a3d900','#eedeb0','#ae7000','#b35c44','#392f41','#ff461f','#44cef6','#edd1db','#003371'];//随机颜色 //给btn注册点击事件ain btn.onclick=function(){ pbox.innerHTML="";//清空pbo for(var i=0;i=10;i……

11小时46分钟前回答

javascript实现日期三级联动下拉框选择菜单

由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的【年】或者【月】,之前保存的具体的【日】就不显示啦,产品说不管编辑哪个数据,其他数据不变; 然后自己改了一下代码: htmlhead meta charset="UTF-8"/ meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/ titleJS年月日三级联动下拉框日期选择代码/title/headbodyform name="reg_testdate" select name="YYYY" onChange="YYYYDD(this.value)" option value=""请选择 年/option /select select name="MM" onChange="MMDD(this.value)" option value=""选择 月/option /select select name="DD" onChange="DDD(this.value)" option value=""选择 日/option /select/formscrip……