用JavaScript修改CSS属性的代码


Posted in Javascript onMay 06, 2013

用JavaScript修改CSS属性 只有写原生的javascript了。

1.用JS修改标签的 class 属性值:

class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。

更改一个标签的 class 属性的代码是:

document.getElementById( id ).className = 字符串;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。

利用这种办法可以把标签的CSS样式表替换成另外一个,也可以让一个没有应用CSS样式的标签应用指定的样式。

举例:

<style type="text/css"> 
.txt { 
font-size: 30px; font-weight: bold; color: red; 
} 
</style> 
<div id="tt">欢迎光临!</div> 
<p><button onclick="setClass()">更改样式</button></p> 
<script type="text/javascript"> 
function setClass() 
{ 
document.getElementById( "tt" ).className = "txt"; 
} 
</script>

2.用JS修改标签的 style 属性值:

style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。DOM 对象也有 style 属性,不过这个属性本身也是一个对象,Style 对象的属性和 CSS 属性是一一对应的,当改变了 Style 对象的属性时,对应标签的 CSS 属性值也就改变了,所以这属于第二种修改方法。

更改一个标签的 CSS 属性的代码是:

document.getElementById( id ).style.属性名 = 值;
document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。

说明:这种方法修改的单一的一个CSS属性,它不影响标签上其它CSS属性值。

举例:

div id="t2">欢迎光临!</div> 
<p><button onclick="setSize()">大小</button> 
<button onclick="setColor()">颜色</button> 
<button onclick="setbgColor()">背景</button> 
<button onclick="setBd()">边框</button> 
</p> 
<script type="text/javascript"> 
function setSize() 
{ 
document.getElementById( "t2" ).style.fontSize = "30px"; 
} 
function setColor() 
{ 
document.getElementById( "t2" ).style.color = "red"; 
} 
function setbgColor() 
{ 
document.getElementById( "t2" ).style.backgroundColor = "blue"; 
} 
function setBd() 
{ 
document.getElementById( "t2" ).style.border = "3px solid #FA8072"; 
} 
</script>
方法:
document.getElementById("xx").style.xxx中的所有属性是什么
盒子标签和属性对照
CSS语法(不区分大小写) JavaScript语法(区分大小写)
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
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
颜色和背景标签和属性对照
CSS 语法(不区分大小写) JavaScript 语法(区分大小写)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
 
样式标签和属性对照
CSS语法(不区分大小写) JavaScript 语法(区分大小写)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
 
文字样式标签和属性对照
CSS 语法(不区分大小写) JavaScript 语法(区分大小写)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
 
文本标签和属性对照
CSS 语法(不区分大小写) JavaScript 语法(区分大小写)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign 
Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 #Javascript
jquery移动listbox的值原理及代码
May 03 #Javascript
You might like
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
JS获取父节点方法
2009/08/20 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
python文件操作整理汇总
2014/10/21 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python实现动态创建类的方法分析
2019/06/25 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
证婚人搞笑证婚词
2014/01/10 职场文书
大学新生欢迎词
2014/01/10 职场文书
上课迟到检讨书
2014/01/19 职场文书
党支部公开承诺书
2014/03/28 职场文书
通信工程专业求职信
2014/06/04 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
党支部四风整改方案
2014/10/25 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
初中数学教学随笔
2015/08/15 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS