浅谈行间样式与非行间样式

来源：互联网发布：淘宝标题自动优化软件编辑：程序博客网时间：2024/06/10 08:52

对于新手来说，很多人只是简单的了解CSS的三种使用方法

1.行间样式表

<h1 style="width:100px">

</pre><p></p><p>2.内部样式表</p><p></p><pre name="code" class="html"><head><span style="white-space:pre"></span><style><span style="white-space:pre"></span>h1 {width:100px;}<span style="white-space:pre"></span></style></head>

<body>    <h1>abc</h1>    <style>      h1{width:100px;}    </stye></body>

3.外部样式表

<head><title>abc</title>      <link rel="stylesheet"  href="style.css" /></head>

其中W3C对内部样式表的标准写法是第一种形式。（谁管他呢，怎样方便就怎样来！）同时大家对于obj.style[attr]也是比较熟悉的，对于很多新手来说可能经常会在js里面给对象添加一些样式。例如：

oDiv.style.width=100px;oLi.style.height=50px;oBtn.style.zIndex=2;oInput.style.borderRadius=10px;.......

这些都是很常见的操作，但是你有没有考虑过我们要改变的这些值本身是多少呢？为此我做了以下实验。以下是一段简单的代码

<!DOCTYPE HTML><html><head><style>#div1 {width:100px;   height:100px;   border:1px solid #000;   background:red;   }</style></head><body><div id="div1"></div></body></html>

当我们很熟悉的通过以下代码想去获取div的width属性时就发现了问题

<script>window.onload=function(){   var oDiv=document.getElementById('div1');   alert(oDiv.style.width);}</script>

我们会发现div的width的值居然是空的。

一般的来说你可能觉得是不是样式写法有问题，为了证实这个观点可能会在JS里面进行如下尝试。

oDiv.style.width='100px';

然后惊奇的发现其实是可以对div的width进行赋值的，然后当我们再去获取div的width时发现有能正常获得了

<script>   window.onload=function(){<span style="white-space:pre"></span>var oDiv=document.getElementById('div1');<span style="white-space:pre"></span>oDiv.style.width='100px';<span style="white-space:pre"></span>alert(oDiv.style.width);   }</script>

这时候你会觉得很奇怪，明明在内部样式表中有定义，却无法读取到，然而在js里面重新定义之后就又能正常的读到这个值了。这是因为obj.style[attr]这个方法只能获取对象的行间样式，当我们打开开发者选项去看页面下的源码的时候一切问题就真相大白了。

当我们没有在js里面重新定义div的width的时候源码是这样的：

而当我们在js里面重新定义了div的width之后的源码就变成了这样：

上图中我们可以看到在body里面的div标签下被加上了width的样式，所以我们通过oDiv.style.width就可以读取到它的值了。这与下面的方式是一样的，当我们直接定义行间样式

<div id="div1" style="width:100px;"></div>

这时候我们再重新通过alert的方法即可以正常的获取到div的width的值。这样即使不在js里面重新定义div的width的值也可以直接通过oDiv.style.width来获取到它的宽度。所以同时得出一个结论，通过js来改变对象的样式时，改变的是对象的行间样式。

当然你可能要问那我怎么能不添加行间样式还同时能获取到obj.style[attr]的值，这就需要用到obj.currentStyle[attr]这个方法来获取对象的非行间样式。通常的做法是将其包成一个函数，通过返回值来获取。（至于为何这么写这里就不详细说明了）

function getStyle(obj,attr){   if(obj.currentStyle){     return obj.currentStyle[attr];   }else{     return getComputedStyle(obj,false)[attr];   }}

我们先将div的行间样式去掉，然后在js里面添加这样一句

<script>function getStyle(obj,attr){   if(obj.currentStyle){      return obj.currentStyle[attr];<span style="white-space:pre"></span>   }else{      return getComputedStyle(obj,false)[attr];<span style="white-space:pre"></span>   }}window.onload=function(){   var oDiv=document.getElementById('div1');   alert(oDiv.clientWidth);}</script>

然后发现还是可以得到我们想要的结果，同时div的行间样式也没有改变。

说到这里相信你已经可以理解如何来获取行间与非行间样式，以及两者的区别了。

0 0