用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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 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
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python语法快速入门指南
2015/10/12 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
django的csrf实现过程详解
2019/07/26 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
一些.net面试题
2014/10/06 面试题
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
培训心得体会
2013/12/29 职场文书
家长会主持词
2014/03/26 职场文书
股权转让协议书范本
2014/04/12 职场文书
社区健康教育工作方案
2014/06/03 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang