STYLE.BACKGROUND属性用法 javascript获取框架背景色怎么用JavaScript获取框架内网页的背景色

什么是STYLE.BACKGROUND属性怎么用才对

STYLE.BACKGROUND属性其实就是用来设置网页元素背景样式的CSS属性，简而言之，就是你可以通过它给网页加点颜色或者背景图片，让页面看上去更有感觉。具体用法相当简单：

背景图片（background-image）：你可以用URL或者相对路径指定一张图片作为页面背景，比如下面这句代码：
element.style.backgroundImage = "url('image.jpg')";
就能帮你设置背景图。
背景颜色（background-color）：顾名思义，就是给背景充个颜色，比如红色、蓝色什么的，都能轻松搞定。

很明显，这两个属性配合起来用能让你的页面背景更加炫酷又灵活！

怎么用JavaScript获取框架内网页的背景色 style写进去为什么不起效果

这部分真的挺常见的坑，说说怎样用JavaScript拿iframe里面网页的背景色吧。其实你就是：

先给iframe加个style，比如 style="background:#FFFFFF"，确保框架本身有背景色。
用这段代码抓取背景色：
javascript var s = document.getElementById("你框架的id").style.background;
这样，变量s里面就存着你想要的颜色啦。是不是挺简单！

不过，这里有个小提示：如果你把背景色写在CSS文件里面，JavaScript的style属性是拿不到的，style只会读取行内样式。
换句话说：

如果你写了<iframe id="cF" style="background:#FFFFFF">，js就能拿到#FFFFFF。
但如果样式写在单独的CSS文件或者<style>标签里面，js语句就会拿不到颜色，因为那叫“嵌入样式”，和行内样式不一样。

总结来了，搞清楚这个区别，才能让你的小程序不再迷路！要改颜色变化，用JS操作你的行内样式，那效果才明显嘛！

而且，给大家额外分享个小技巧：你知道JS怎么让表格每隔一行换色，还能鼠标悬浮变色吗？比如这样：

function lineChange() {
  var lines = document.getElementsByTagName("tr");
  for(var i = 0; i < lines.length; i++) {
    if(i % 2 === 0) {
      lines[i].style.background = "#fff";  // 偶数行白色
    } else {
      lines[i].style.background = "red";   // 奇数行红色
    }
    lines[i].onmouseover = function() {
      this.style.background = "#ccc";       // 鼠标划过变灰
    };
    lines[i].onmouseout = function() {
      // 鼠标离开时还原颜色
      if(this.rowIndex % 2 === 0) {
        this.style.background = "#fff";
      } else {
        this.style.background = "red";
      }
    };
  }
}