ppk谈JavaScript style属性


Posted in Javascript onOctober 10, 2008

事实上,7个范例脚本都用到了某种形式的CSS修改。比如,“表单验证”改变出错的表单域的样式,“XMLHTTP速度测试计”使用动画(其实也就是在很短的时间内多次改变某个样式)来让用户注意到速度的数据(而且,老实讲这算是有些花哨的效果)。“下拉菜单”通过改变样式来显示和隐藏菜单项。这些变化都拥有同样的目的:把用户的注意力吸引到这些元素上。

JavaScript有如下4种修改CSS的方式:

l 修改元素的style属性(element.style.margin='10%');

l 改变元素的class或id(element.className='error'),浏览器将自动应用那些定义在新的class或id上的样式;

l 向文档中写入新的CSS指令(document.write('<style>.accessibility{display: none}</style>');

l 改变整个页面的样式表。

大多数的CSS改变脚本,都采用修改style属性或改变class或id的方式。document.write方法只适合用于某些特定的场合以增强页面的可访问性。最后,我们很少会改变整个样式表,因为并非所有的浏览器都支持这样做,而且通常你也只是想改变某些特定元素的样式。

不管怎么说,我在范例脚本中使用了所有4种方法。我们将在本章中逐个研究这些方法及它们适用的场合。

A style属性

最初也是最广为人知的修改CSS的方式就是通过所有HTML元素都拥有的style属性,并且访问它们的内联样式,style对象对每一个内联的CSS声明都包含一个对应的属性。如果你想设置一个元素的CSS属性margin,使用element.style.margin。如果你想要设置它的CSS属性color,就使用element.style.color。JavaScript属性总是拥有一个和CSS属性相似的名字。

内联样式

记住:HTML元素的style属性让我们得以访问该元素的内联样式。

让我们来回顾一些CSS的理论。CSS提供4种方式来给元素定义样式表。你可以使用内联样式,即直接把你的CSS写在HTML标签的style属性中。

<p style="margin: 10%">Text</p>

此外,你可以嵌入、链入或引入样式表。不管用何种方法,因为内联样式比其他任何形式的样式更为明确,内联样式能覆盖那些嵌入、链入或引入页面的样式表中定义的样式。因为style属性可以访问这些内联样式,所以它总是能覆盖其他的样式。这是这种方法的巨大优势。

然而,当你尝试读取样式时,可能遭遇问题。看这个例子:

<p id="test">Text</p>

p#test {

margin: 10%;

}

alert(document.getElementById('test').style.margin);

测试段落并没有包含任何内联样式,margin: 10%是被定义在一个嵌入的(或者链入,或者引入的)样式表中,而它是不可能从style属性中读出来的。弹出警告框显示为空。

在下一个例子中,弹出警告框将显示返回结果“10%”,因为margin现在被定义为内联样式:

<p style="margin: 10%" id="test">Text</p>

alert(document.getElementById('test').style.margin);

所以,style属性最适合于设置样式,而要获取它们时就没那么有用了。后面我们会讨论从嵌入页面的、链入的或者引入的样式表中获取样式的方法。

破折号

许多CSS属性的名字包含一个破折号,例如font-size。然而在JavaScript中,破折号表示相减(minus),因此它不能被用在属性名中。这将给出一个错误:

element.style.font-size = '120%';

这是要求浏览器从element.style.font里减去(未定义的)变量size吗?如果是= '120%'代表什么意义呢?作为替代,浏览器期望一个驼峰格式(camelCase)的属性名:

element.style.fontSize = '120%';

一般规则是从CSS属性名中移除所有的破折号,并且破折号后的字符变为大写。这样,margin-left变成了marginLeft,text-decoration变成了textDecoration,而border-left -style变成了borderLeftStyle。

单位

在JavaScript很多数值类型的值需要一个单位,就像它们在CSS中声明时那样。fontSize=120表示什么?120像素、还是120磅或者120%?浏览器可不知道这些,所以它不会做任何反应。为了阐明你的意图,单位是必须的。

以setWidth()函数为例,它是实现“XMLHTTP测速计”的动画效果的核心程序之一:

[XMLHTTP测速计,第70~73行]

function setWidth(width) {

if (width < 0) width = 0;

document.getElementById('meter').style.width = width + 'px';

}

该函数接手一个值,它将改变meter的宽度为这个新值。在经过一个安全检查以确保该值大于0之后,设置元素的style.width为这个新的宽度值。最后加上'px',因为不这样的话,浏览器可能不知道如何解释该数值,结果什么都不做。

不要忘了'px'

忘记在width或height之后附加一个'px'单位是一个常见的CSS修改错误。

在CSS的怪癖模式(quirks mode)里,加上'px'不是必须的,因为浏览器遵循旧的规则,把无单位的值视为像素值。本质上这不是一个问题,但很多Web开发人员因此养成了改变宽度或高度值后遗忘加上单位的习惯,当他们工作在CSS严格模式(strict mode)下时就遭遇到了问题。

获取样式

警告 以下所述内容有浏览器兼容性问题。

正如我们所看到的,style属性不能读取设置在嵌入、链入或引入页面的样式表中的样式。但是因为Web开发人员有时候需要读取这些样式,微软和W3C都提供了访问非内联样式的方式。微软的解决方案只能工作在Explorer下,而W3C标准可以工作在Mozilla和Opera下。

微软的解决方案就是currentStyle属性,它的工作方式像极了style属性,除了两件事情:

l 它可以访问所有样式,不仅仅是内联样式,所以它汇报的是实际应用在元素上的样式;

l 它是只读的,你不能通过它设置样式。

例如:

var x = document.getElementById('test');

alert(x.currentStyle.color);

现在弹出对话框显示元素当前的color样式,而不管它是在什么地方被定义的。

W3C的解决方案是window.getComputedStyle()方法,它以相似但语法更为复杂的方式工作:

var x = document.getElementById('test');

alert(window.getComputedStyle(x,null).color);

getComputedStyle()总是返回一个像素值,尽管原来的样式可能会是50em或11%。

同以前一样,当我们遭遇不兼容的情形时,需要一些代码分支来满足所有浏览器:

function getRealStyle(id,styleName) {

var element = document.getElementById(id);

var realStyle = null;

if (element.currentStyle)

realStyle = element.currentStyle[styleName];

else if (window.getComputedStyle)

realStyle = window.getComputedStyle(element,null)[styleName];

return realStyle;

}

你可以使用这个函数如下:

var textDecStyle = getRealStyle('test','textDecoration');

记住getComputedStyle()将总是返回一个像素值,而currentStyle保留原来定义在CSS中的单位。

简写样式

警告 以下所述内容有浏览器兼容性问题。

不管你是通过style属性获得内联样式,还是通过刚刚讨论的函数获取其他的样式,当你尝试读取简写样式时,都会遇到问题。

看这个边框(border)的定义

<p id="test" style="border: 1px solid #cc0000;">Text</p>

因为这是一个内联样式,你期望这行代码可以工作:

alert(document.getElementById('test').style.border);

不幸的是,它不能。不同浏览器在弹出对话框中显示的确切的值是不一致的。

l Explorer 6给出的是 #cc0000 1px solid。

l Mozilla 1.7.12给出的是1px solid rgb(204,0,0)。

l Opera 9给出的是1px solid #cc0000。

l Safari 1.3没有给出任何边框值。

问题出在border是一个简写形式的声明。它暗中包括了不少于12个样式:上(top)、左(left)、下(bottom)和右(right)边框的宽度(width)、风格(style)和颜色(color)。相似地,font声明是font-size、font-family、font-weight和line-height的简写形式,所以它也会展现相似的问题。

rgb()

注意Mozilla使用的特殊的color语法:rgb(204,0,0)。这是传统的#cc0000的有效的替代值。你可以在CSS和JavaScript中任意选择一个语法使用。

浏览器是如何处理这些简写形式的声明呢?上面的例子似乎过于直接;你的直觉应该是期望浏览器返回1px solid #cc0000,确保与内联样式所定义的一致。不幸的是,简写形式的属性比那还复杂的多。

考虑下面的情形:

p {

border: 1px solid #cc0000;

}

<p id="test" style="border-color: #00cc00;">Test</p>

alert(document.getElementById('test').style.borderRightColor);

所有浏览器都汇报正确的颜色,尽管内联样式中没有包含border-right-color而是声明了border-color。显然浏览器认为右边框的颜色在设置整个边框颜色时被设置,这也是合逻辑的。

正如你看到的,浏览器必须为这些异常情况制定规则,而且它们已经选择了略有不同的方式去处理简写形式的声明。在缺乏处理简写属性的明确规范的情况下,很难评判哪个浏览器是对还是错。

Javascript 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
webpack4的迁移的使用方法
May 25 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 #Javascript
执行iframe中的javascript方法
Oct 07 #Javascript
JS版网站风格切换实例代码
Oct 06 #Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 #Javascript
IE与firefox之jquery用法区别
Oct 03 #Javascript
jquery的颜色选择插件实例代码
Oct 02 #Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
node.js入门教程
2014/06/01 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
导游的职业规划书范文
2013/12/27 职场文书
爱国主义演讲稿
2014/05/07 职场文书
2014年文员工作总结
2014/11/18 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python