从零开始前端学习[47]:如何使用javascript来操作行内样式或者属性浅析

如何使用javascript来操作行内样式或者属性

使用javascript来操作行内样式，或者标签固有属性

提示
博主:章飞_906285288
博客地址：http://blog.csdn.net/qq_29924041

使用javascript来操作行内样式，或者标签固有属性

我们知道，html是结构层，css是样式层，而js则是行为层，一个页面的样式控制主要是css来进行控制的，而在css中样式的引入又包括了外部引用，内部引用，或者行内样式等，但是这些样式都是通过样式属性来进行的。
内部样式或者行内样式都是写在style标签内的，而一般对于js所操纵的样式，一般情况下暂且可以理解为行内样式，那什么是行内样式呢？？？行内样式是写在左标签内部的样式，通过style来引入，

如下所示:
  <p class="fl_l" id="innerHTML_2" style="font-size: 20px;color: red;background: blue;text-align: center;">innerHTML_2</p>

并且行内样式也是最高的。

那怎么进行操作的呢？如下所示语法：

    语法：对象.style.css属性 = ""; 如果有“-”就要用驼峰命名（把减号去掉，减号后面的第一个字母大写，如backgroundColor）
    如：
    var box = document.getElementById("box");
    box.onclick = function(){
        box.style.backgroundColor = '#999';
    }

注意在js中引用的时候是不存在有中间的”-“的，同样的，其属性值与原来基本上也是一致的，并没有太大区别。

注意其在引用的时候是需要先引入style的。

关于通过js浮动的一点简单介绍：
在我们的前端里面我们都知道兼容很恼火，这里的浮动就有一个兼容问题，首先，在js里面我们不能直接这样子写

oBox.style.flaot = "right" 错误的写法

因为flaot是关键字，虽然在谷歌里面这样写也可以这样子写，但是，我们也不能这样子写，比如c++里面是代表浮点型，所以我们用其他的代替，还有我们的class也是保留字要用className代替

所以在google里面的话：

oBox.style.cssFloat = 'right';

而在低版本的浏览器中的话:

oBox.style.styleFloat = 'right';

最重要的还有父级元素坍塌问题的思考，因为在你设置了浮动之后，如果不去清除浮动，势必会造成父级元素的坍塌的现象，这个时候你必须要清除浮动，

parent.setAttribute("class",'clearfix');  /*设置类属性来消除掉父级坍塌事件**/

具体会通过代码的形式来展示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .main{width: 800px;margin: 40px auto;box-shadow: 0 0 10px 0 deeppink}
        p{width: 200px;height: 200px;box-shadow: 0 0 10px 0 blue;margin: 10px}
        .clearfix:after{
          display: block;
          content:"";
          clear: both;
        }
  </style>
</head>
<body>
<div class="main">
  <div class="compare1" id="parent">
    <p  id="innerHTML_1">1</p>
    <p  id="innerHTML_2">2</p>
  </div>
</div>
<script>
  var parent = document.getElementById("parent");
  var p1 = document.getElementById("innerHTML_1");
  var p2 = document.getElementById("innerHTML_2");

  p1.onmouseover = function () {
      p1.style.backgroundColor = 'blue';
      p1.style.color = "red";
  }
  p1.onmouseout = function () {
      p1.style.backgroundColor = 'deeppink';
      p1.style.color = "#334499";
  }
  p2.onmouseover = function () {
      p2.style.fontSize = "26px";
      p2.style.textAlign = "center";
  }
  p2.onmouseout = function () {
      p2.style.textAlign = "right";
  }

  parent.onclick= function () {
      parent.style.color = "red";  /*修改字体颜色属性**/
      p1.style.cssFloat = "left";  /*google浏览器让其进行浮动*/
      p1.style.styleFloat = "left"; /*低版本的情况下，浮动*/
      p2.style.cssFloat = "left";
      p2.style.styleFloat = "left";
      parent.setAttribute("class",'clearfix');  /*设置类属性来消除掉父级坍塌事件**/
      console.log("======");
  }
</script>
</body>
</html>