设置css文件中text样式
首先打开操作软件这里用DW编辑工具:取一个css名字为text;
<!DOCTYPE html><html>
<head>
<meta charset="gb2312" />
<title>效果区</title>
</head>
<body>
<style>
.text{ width:200px height:200px background:#09C color:#FFF font-size:18px font-weight:bold text-indent:2em text-align:left}
</style>
<div class="text">
文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域
</div>
</body>
</html>
实现效果图如下:
详解:设置一个css样式取名:text,定义一个宽度与高度分别为200px。
其次设置一个背景颜色background:#09C
字体颜色为白色 color:#FFF
字体的大小为18xp:font-size:18px
设置字体为粗体:font-weight:bold
字体靠左对齐:text-align:left
字体首行缩进2个文字(2em):text-indent:2em
如果网页中一个id为“no”的标签,暂且当div标签来tell;
想要在js中设置这个div的css样式,很一般的做法是:
var
obj
=
document.getElementByIdx_x_x('no')
obj.style.width
=
'400px'
obj.style.height
=
'300px'
如果要设置一堆又一堆的css样式呢,太麻烦了把、
一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create一个元素,难道还想这样简单点?那就要想别的办法了~
于是大家就写了一个又一个的函数,经典的两个是:
var
obj
=
document.getElementByIdx_x_x('no')
function
setStyle(obj,
css)
{
for(var
attr
in
obj){
obj.style[attr]
=
css[attr]
}
}
setStyle(obj,{width:"400px",height:"300px"})
当然还有更简单的,cssText:
var
obj
=
document.getElementByIdx_x_x('no')
obj.style.cssText
=
"width:400px
height:300px"
当然这种方法对于create的元素初始化css样式来说很简单很方便。
以上就是小编为大家带来的js中用cssText设置css样式的简单方法的全部内容了,希望对大家有所帮助,多多支持脚本之家~
可以用css3中新增的选择器“[attribute=value]”来同时选中指定的属性的标签。
1、新建html文档,添加5个input标签,其中第一个和最后一个“type”属性的属性值为“text”:
2、在head标签和body标签之间添加style标签,添加代码“input[type=text]”,“input”指的是标签名,“type”指的是属性名,“text”指的是属性值,这个就会把所有属性名为“type”、属性值为“text”的input标签选中:
3、为被选择的标签设置背景色为红色,这时属性值为“text”的第一个标签和最后一个标签背景色都变成了红色: