JS里添加样式的方法:
1、首先,要创建标签,使用document.createElement函数,如图创建div标签。告激租使用其className设置class,id设置id,style设置样式。
2、样式的设置也可以袜兆分铅行项进行。如图是分项设置其left,top,display,position,width几个样式。
3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然,也可以分项分层添加标签。
4、设置好标签(如图是div标签,变量名box),使用document.body.appendChild添加标签到body当中。
5、标签添加以后,依然可以修改样式,如图是使用document.getElementById方法根据id获取标签,修改style。
6、标签添加以后,也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。
取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:复制代码代码如下:var p_class = $("p").attr("class")//获取p元素的class[html]使用attr()方法来设置p元素的class,JQuery代码如下:[code]1 $("p").attr("'class", "high")//设置p元素的class为 "high"大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。
2 .another{ font-style:italiccolor:blue}
后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another")// 追加样式3 })后当单击“追加class类”按钮时,p元素样罩烂式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。
1.如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。 2.如果有不同的class设定了同一样式属性,则后者覆盖前者。 在上例中,相当于给p元素添加了如下样式:复制代码代码如下:1 color : red/* 字体颜色设置红色*/
2 font-style:italic
3 color:blue
以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。
移除样式 如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:复制代码代码如下:1 $("p").removeClass("high")//移除p元素中值为"high"的class
果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:
1 $("p").removeClass("high").removeClass("another")
Query提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:
1 $("p").removeClass("high another")
外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:
1 $("p").removeClass()//移除p元素的所有class
换样式 JQuery中有一个方法toggle(),JQuery代码如下:
1 toggleBtn.toggle(function(){
2 //元素显示 代码③
3 }, function(){
4 //元素隐藏 代码④5 })oggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。
另外JQuery还提慎判供物孝漏了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法 *** 作。
复制代码代码如下:1 $("p").toggleClass("another")//重复切换类名“another”
不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:复制代码代码如下:1 $("p").hasClass("another")
个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:复制代码代码如下:view sourceprint? 1 $("p").is(".another")//is("."+class)
给一个HTML元素设置css属性,如复制代码
代码如下:
var
head=
document.getElementById("head")
head.style.width
=
"200px"
head.style.height
=
"70px"
head.style.display
=
"block"
这样写太罗嗦了,为了简单些写个工具函数,如
复制代码
代码如下:
function
setStyle(obj,css){
for(var
atr
in
css){
obj.style[atr]
=
css[atr]
}
}
var
head=
document.getElementById("head")
setStyle(head,{width:"200px",height:"70px",display:"block"})
发现
API
中使用了cssText属性,后在各浏览器中测试都通过了。一行代码即可,实在很妙。如
复制代码
代码如下:
var
head=
document.getElementById("head")
head.style.cssText="width:200pxheight:70pxdisplay:bolck"
和innerHTML一样,cssText很快捷且所大迹有浏览器都支持。此外当批量 *** 作样式时,cssText只需旁厅一次reflow,提高了页面渲染性能。
但cssText也有个缺点,会覆盖之前的样式。如
复制代码
代码如下:
<div
style="color:red">TEST</div>
想给该div在添加个css属性width
复制代码
代码如下:
div.style.cssText
=
"width:200px"
这时虽然width应用上了,但之前的color被覆盖丢失了。因此使用运仿隐cssText时应该采用叠加的方式以保留原有的样式。
复制代码
代码如下:
function
setStyle(el,
strCss){
var
sty
=
el.style
sty.cssText
=
sty.cssText
+
strCss
}
使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题,但由于
IE6/7/8中cssText返回值少了分号
会让你失望。
因此对IE6/7/8还需单独处理下,如果cssText返回值没""则补上
复制代码
代码如下:
function
setStyle(el,
strCss){
function
endsWith(str,
suffix)
{
var
l
=
str.length
-
suffix.length
return
l
>=
0
&&
str.indexOf(suffix,
l)
==
l
}
var
sty
=
el.style,
cssText
=
sty.cssText
if(!endsWith(cssText,
'')){
cssText
+=
''
}
sty.cssText
=
cssText
+
strCss
}
相关:
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSSStyleDeclaration
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)