JavaScript CSS修改学习第二章 样式


Posted in Javascript onFebruary 19, 2010

另外,有时候你也许想知道添加到一个元素或者链接上的样式的具体内容。而style属性只能读取元素的内联形式的样式,所以如果你想读取其他样式就得另想办法了。

偏移
在使用一些小技巧之前,IE和Mozilla已经添加了一个比较好的办法:offsetSomething。使用这些属性你就能够读取这个段落现在的一些比较重要的样式。
举个例子,使用offsetWidth。你就能知道这个段落现在的宽度的像素值。为了测试,你可以改变一下窗口的大小然后再运行一下。
代码也非常的简单:

function getOff() 
{ 
    x = document.getElementById('test'); 
    return x.offsetWidth; 
}

然后我们以警告框的形式显示这个值:alert('offsetWidth = ' + getOff())。
现在你就得到了这个段落在用户浏览器里面的像素值,就可以进行一些运算了。下面是一些你可以读取的其他属性:
offsetHeight:高度的像素值
offsetLeft:距离左边的像素值(什么左边?见下)
offsetTop:距离上面的像素值(什么上面?见下)
offsetWidth:宽度的像素值
注意这些属性是只读的,你不能直接修改。
为了方便说明,我准备了一小段代码。首先把这个段落移过来。
然后我们给他的宽度增加100像素。如果我们这时候查看offsetWidth就会看到变化。你也可以减少100像素然后查看。
如果你在两种浏览器里面查看,可能会有不同。在IE里面就是原来的宽度+100像素,但是在Mozilla里面不是。因为Mozilla的更合乎标准一些:他只是查看内容的宽度,而IE里面会加上边距和边框的宽度。虽然Mozilla的比较正确,但是我更倾向于IE的,因为更加的直观一些。
如果你不介意Mozilla/IE的兼容性的话,代码还是很简单的:
function changeOff(amount) 
{ 
    var y = getOff(); 
    x.style.width = y + amount; 
}

我们给函数传递要改变的值amount,然后用getOff()函数获得原来的大小然后存储在y里面,最后我们用原始大小和需要改变的值来重新确定元素的大小。
offsetWidth/Top
关于他们的定义,请在上一章中查看。

得到样式
我们看到offset属性局限性很大。浏览器给了我们一些更加方便的访问元素样式的方法但是不幸的是他们的可靠性和通用性不及offset。
Mozilla和Opera
Mozilla和Opera更倾向于使用css式的表达式而不是JavaScript的。比如你要得到字体大小就要使用css的font-size,而不是JavaScript的fontsize。
Mozilla支持的样式很少。比如border[-somthing]在Mozilla里面就是空值,但是Opera能给出准确的值。
IE
在IE里面我们能得到很多的样式信息,但是我们一定要小心。在这个例子中border不起作用,你需要borderStyle,borderWidth,borderColor。
注意在JavaScript里面要方位border-width属性必须拼写成borderWidth。因为这个连接线可能会被认为是减号。
另外,IE经常给出auto值。虽然这是真实的值,但是没什么用。所以有时候还得使用offset。

代码
代码依旧很简单:

function getStyle(el,styleProp) 
{ 
    var x = document.getElementById(el); 
    if (x.currentStyle) 
        var y = x.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    return y; 
}

首先我们传递元素的ID和想访问的样式名称
function getStyle(el,styleProp) {

然后我们把元素保存在x中:
var x = document.getElementById(el);

首先是IE的方法:元素的currentStyle属性
if (x.currentStyle) 2 var y = x.currentStyle[styleProp]; 
然后是Mozilla方法:使用getComputeStyle()方法,在Opera也同样可行 
[code] else if (window.getComputedStyle) 
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

然后给调用这个函数的程序返回y。
return y; 
}

虽然这个函数不是很完美,但是也已经力所能及了。

翻译地址:http://www.quirksmode.org/dom/getstyles.html
转载请保留以下信息
作者:北玉(tw:@rehawk)

Javascript 相关文章推荐
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JS实现打砖块游戏
Feb 14 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 #Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 #Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 #Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 #Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 #Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 #Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 #Javascript
You might like
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
使用Python生成随机密码的示例分享
2016/02/18 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
机械专业应届生求职信
2013/12/12 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
小学班主任培训方案
2014/06/04 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
MySQL 十大常用字符串函数详解
2021/06/30 MySQL