JS|JS动态修改网页文件的CSS

  • 时间:2018-06-06 01:54 作者:小智雅汇 来源:小智雅汇 阅读:455
  • 扫一扫,手机访问
摘要:网页每个Element元素都有style和classname属性,能通过CSS直接设置,也允许脚本指定文档元素的CSS样式,或者修改应使用到元素上的css类名,设置这些css相关的属性会改变文档元素的呈现。1 使用JS修改标签的 class 属性值:class 属性是在标签上引使用样式表的方法之一,

网页每个Element元素都有style和classname属性,能通过CSS直接设置,也允许脚本指定文档元素的CSS样式,或者修改应使用到元素上的css类名,设置这些css相关的属性会改变文档元素的呈现。

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

class 属性是在标签上引使用样式表的方法之一,它的值是一个样式表的选择符,假如改变了 class 属性的值,标签所引使用的样式表也就更换了。

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

document.getElementById( id ).className = 字符串;

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

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

举例1,代码如下:

欢迎光临!

举例2,代码如下:

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

元素的style属性能直接设置元素的外观属性。Style 对象的属性和 CSS 属性是逐个对应的,能直接设置,也能通过JS动态更改。

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

document.getElementById( id ).style.属性名 = 值;

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

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

举例,代码如下:

div id="t2">欢迎光临!

3 综合实例

function clk(event) {

var parent = document.getElementById("parent");

//改变className

var child0 = document.createElement("div");

child0.innerHTML = "child0";

child0.className = "newDiv";

parent.appendChild(child0);

//改变cssText

var child1 = document.createElement("div");

child1.innerHTML = "child1";

child1.style.cssText = "color:red;";

parent.appendChild(child1);

//改变直接样式

var child2 = document.createElement("div");

child2.innerHTML = "child2";

child2.style.fontSize = "28px";

parent.appendChild(child2);

}

4 JS设置CSS的语法与CSS语法的区别

盒子标签和属性对照
CSS语法(不区分大小写)JavaScript语法(区分大小写)
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
floatfloatStyle
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
颜色和背景标签和属性对照
CSS 语法(不区分大小写)JavaScript 语法(区分大小写)
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
colorcolor


样式标签和属性对照
CSS语法(不区分大小写)JavaScript 语法(区分大小写)
displaydisplay
list-style-typelistStyleType
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-stylelistStyle
white-spacewhiteSpace


文字样式标签和属性对照
CSS 语法(不区分大小写)JavaScript 语法(区分大小写)
fontfont
font-familyfontFamily
font-sizefontSize
font-stylefontStyle
font-variantfontVariant
font-weightfontWeight


文本标签和属性对照
CSS 语法(不区分大小写)JavaScript 语法(区分大小写)
letter-spacingletterSpacing
line-breaklineBreak
line-heightlineHeight
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-justifytextJustify
text-transformtextTransform
vertical-align

verticalAlign

从上表能看出,两者的写法区别在于CSS是不区分大小写的,所以两个英文字中间使用了一个横杠"-",使用JS区分大小写,所以不使用横杠"-",而使用英文的小驼峰式命名法(lower camel case,第一个单字以小写字母开始,第二个单字的首字母大写)。

-End-

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
【系统环境|软件环境】前台开发WebStorm常用快捷键,火速收藏!(2019-12-04 14:25)
【系统环境|软件环境】微博H5登录和发微博组件(2019-12-04 14:25)
【系统环境|软件环境】5分钟谈前台面试,小伙伴都惊呆了(2019-12-04 14:23)
手机二维码手机访问领取大礼包
返回顶部