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 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
原生js实现九宫格拖拽换位
Jan 26 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python 私有函数的实例详解
2017/09/11 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python元组知识点总结
2019/02/18 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
实习生单位鉴定意见
2013/12/04 职场文书
简单的辞职信范文
2014/01/18 职场文书
教学实验楼管理制度
2014/02/01 职场文书
企业消防安全制度
2014/02/02 职场文书
贺卡寄语大全
2014/04/11 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang