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

  • 时间:2018-06-06 01:54 作者:小智雅汇 来源:小智雅汇 阅读:334
  • 扫一扫,手机访问
摘要:网页每个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)
最新发布的资讯信息
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
【系统环境|】教你零基础如何快速入门大数据技巧(2019-05-12 11:25)
【系统环境|】想学习大数据?这才是完整的大数据学习体系(2019-05-11 11:33)
手机二维码手机访问领取大礼包
返回顶部