css文件中如何设置text样式

html-css022

css文件中如何设置text样式,第1张

设置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样式的简单方法的全部内容了，希望对大家有所帮助，多多支持脚本之家~