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 相关文章推荐
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
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
php 多继承的几种常见实现方法示例
2019/11/18 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
如何实现动态删除javascript函数
2007/05/27 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
js数组操作学习总结
2013/11/04 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
js获取url传值的方法
2015/12/18 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
HTML5进度条特效
2014/12/18 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
机电一体化专业毕业生自荐信
2014/06/19 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android