用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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
jquery插件validate验证的小例子
May 08 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
js实现弹框效果
Mar 24 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中防止SQL注入实现代码
2011/02/19 PHP
PHP基础知识介绍
2013/09/17 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
怎么写好自荐信
2013/10/30 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
css3 选择器
2022/05/11 HTML / CSS