动态增加css样式

html-css014

动态增加css样式,第1张

在有些做项目项目中,需要用户自定义组件的CSS样式并即时改变组件样式状态。

1. 增加 style样式

2. 更新 style样式

3. 删除 style样式

4.其他使用方式

即使用style属性,将CSS直接写在HTML标签中。例如:<p style=color:red这行段落将显示为红色。</p注意:style属性可以用在<body内的所有(X)HTML标签上,但不能应用与<body以外的标签,如<title<head等标签。二,嵌入式样式表(Embedded Style Sheets)嵌入式样式表使用<style</style标签嵌入到(X)HTML文件的头部中,代码如下:<head<style type=text/css<!--.class{color:red} -- </style</head注意:对于一些不能识别<style标签的浏览器,使用(X)HTML的注释标签<!-- 注释文字 --把样式包含进来。这样源码天空,不支持<style标签的的浏览器会忽略样式内容,而支持<style标签的浏览器会解读样式表。三,外部样式表(Link Style Sheets)在<head标签内使用<link标签将样式表文件连接到(X)HTML文件中。代码如下:

比如网页中一个p标签的样式是:<p style="color:red;"></p>

然后现在通过css控制页面就变成了:

<p class="red"></p>

然后在head标签中间写

<style type="text/css">

.red{color:red}

</style>

当然也可以把放在head里的css放到一个css文件中,通过

<link href="xx.css" rel="stylesheet" type="text/css" />引用