这篇文章主要介绍了js 怎么给内容添加样式,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下。
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 。
JavaScript修改CSS有4种方法:
修改节点style(内联样式);
改变节点class或id;
写入新的css;
替换页面中的样式表GPT改写。
几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰、易理解。
后面还会说说如何获取元素的真实样式和一个表单中的注意事项。
1、修改节点style(内联样式)
这种方法权重是最高的,直接写在节点的style属性上,他会覆盖其他方法设置的样式。使用方法很简单:var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏
但是要注意的是,有些CSS样式名称是由几个单词组成的例如font-size、background-image等,他们都是用破折号(-)连接起来的,然而JavaScript中破折号表示“减”,因此不能作为属性名称。我们需要使用“驼峰格式(camelCase)”来书写属性名,例如fontSize、backgroundImage。
还要注意的是,很多style都是有单位的,不能只给一个数字。例如fontSize的单位有px、em、%(百分比)等。
这种方法违背了表现和行为分离的原则,一般只适合定义元素经常变化的即时样式(与行为相关),例如一个可用于拖拽的p,随着拖拽,他的top、left属性是不断变换的,此时就不能用class或