zoukankan      html  css  js  c++  java
  • style属性

      style加样式是加在行间,取样式也是在行间取;

      我们来看下面这段代码:  

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4     <meta charset="utf-8" />
     5     <style>
     6         #div1 {
     7             width: 200px;
     8             height: 200px;
     9             border: 1px solid black;
    10             background-color: green;
    11         }
    12     </style>
    13     <script>
    14         function toRed() {
    15             var oDiv = document.getElementById("div1");
    16             oDiv.style.backgroundColor = "red";
    17         }
    18     </script>
    19 </head>
    20 <body>
    21     <input type="button" value="changeToRed" onclick="toRed()" />
    22     <div id="div1"></div>
    23 </body>
    24 </html>

      这段代码定义了一个按钮和一个<div>元素,并在<style>元素中设置了<div>元素的背景颜色为绿色。通过点击按钮,改变<div>元素的背景颜色为红色。

      在chrome的审查元素中,没有点击按钮前,<div>元素的行内样式是下面这个样子:

     

    点击了按钮之后,变成了这样子:

    我们可以看到,点击按钮之后,<div>元素的行内样式增加了 style = "background-color: red;"

    我们把函数改为alert <div>元素的背景颜色,代码如下:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4     <meta charset="utf-8" />
     5     <style>
     6         #div1 {
     7             width: 200px;
     8             height: 200px;
     9             border: 1px solid black;
    10             background-color: green;
    11         }
    12     </style>
    13     <script>
    14         function alertColor() {
    15             var oDiv = document.getElementById("div1");
    16             alert(oDiv.style.backgroundColor);
    17         }
    18     </script>
    19 </head>
    20 <body>
    21     <input type="button" value="alertColor" onclick="alertColor()" />
    22     <div id="div1"></div>
    23 </body>
    24 </html>

      代码执行后弹出一片空白,并不是我们意想中的green。这是因为background-color: green; 这条规则定义在<style>元素中,而style.backgroundColor只能获取到行内样式,但我们并没有在<div>元素中定义background-color,因此会弹出一片空白。

  • 相关阅读:
    win32_弹弹球游戏
    蓝桥杯评测_前n项和
    算法_fibonacci_递归求值
    PTA 分类
    _tmain() 和 main()
    VS2010 C++ 插件 VissualAssistX 安装
    vs2010 > LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
    int、long、long long 的取值范围
    B树 B-树 B+树 B*树
    PTA 5-10 公路村村通 (30)
  • 原文地址:https://www.cnblogs.com/linxd/p/4536854.html
Copyright © 2011-2022 走看看