用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 关键字屏蔽实现函数
Aug 02 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
详解javascript函数的参数
Nov 10 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 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 !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
深入理解vue Render函数
2017/07/19 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python把1变成01的步骤总结
2019/02/27 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python实现代码统计工具
2019/09/19 Python
Python字典底层实现原理详解
2019/12/18 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python如何测试stdout输出
2020/08/10 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
党员批评与自我批评发言
2014/10/02 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
应急管理工作总结2015
2015/05/04 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python