javascript中使用css需要注意的地方小结


Posted in Javascript onSeptember 01, 2010

1.在改变单个元素样式时,注意style对象的语法和css中使用的语法几乎是一一对应的。不过包含连字符的属性则被替换为一种“camel castring”的形式,例如:font-size现在成了fontSize,而margin-top变成了marginTop;
2.在使用“float”时,因为“float”是javascript的一个保留字,所以就不能使用style.float,而改成了style.cssFloat(IE使用的是style.styleFloat);
3. 获得元素的计算样式:
在W3C DOM下可以:

var heading = document.getElementById("heading"); 
var computedStyle = document.defaultView.getComputedStyle(heading,null); 
var computedFontFamily = computedStyle.fontFamily;//sans-serif

IE不支持使用DOM标准方法,可以:
var heading = document.getElementById("heading"); 
var computedFontFamily = heading.currentStyle.fontFamily;//sans-serif

综合上述这些方法,可以创建一个跨浏览器函数来实现
function retrieveComputedStyle(element,styleProperty){ 
var computedStyle = null; 
if(typeof element.currentStyle != "undefined"){ 
computedStyle = element.currentStyle; 
}else{ 
computedStyle = document.defaultView.getComputedStyle(element,null); 
} 
return computedStyle[styleProperty]; 
}

对照表

CSS Properties To JavaScript Reference Conversion

CSS Property JavaScript Reference
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Usage

Internet Explorer

document.all.div_id.style.JS_property_reference = "new_CSS_property_value";

Older Netscape's (4.7 and earlier)

document.div_id.JS_property_reference = "new_CSS_property_value";

Netscape 6.0+ and Opera (and other Mozilla)

document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.

Javascript 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
vue实现图片上传到后台
Jun 29 Javascript
js截取函数(indexOf,join等)
Sep 01 #Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 #Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 #Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 #Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 #Javascript
js 中 document.createEvent的用法
Aug 29 #Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 #Javascript
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
es6数值的扩展方法
2019/03/11 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
Python新手如何理解循环加载模块
2020/05/29 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
厉行勤俭节约倡议书
2014/05/16 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
倡议书的格式写法
2015/04/28 职场文书
python小程序之飘落的银杏
2021/04/17 Python