邀朋友种豆,一起分享吧
喜欢购买正品行货?那就去品牌街

JavaScript动态修改css样式style

来自:种豆 时间:2017-12-29 阅读:569次 原文链接

一、局部改变样式

分为改变直接样式,改变className和改变cssText三种。

需要注意的是:javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。

JavaScript改变Css的className样式的代码示例

document.getElementById('obj').className="新的CSS样式名"
错误的JavaScript写法:

document.getElementById('obj').style.className="新的CSS样式名"
JavaScript改变Css的classText的代码示例

document.getElementById('obj').style.cssText="css 文本内容"
JavaScript直接改变Css样式代码示例

document.getElementById('obj').style.backgroundColor="#003366"

二、全部改变样式

通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />

调用时很简单,如

<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>

对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvita javascript”,也许会对你的疑惑有所帮助。

三、基础知识

通常在网页中样式表的调用方法有三种。

第一种:链入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head>
<title>文档标题</title>
<link rel=stylesheet href="http://www.test.com/demo.css" type="text/css">
</link></head>

而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="http://www.test.com/dhtmlet.css" ?>

第二种:定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的和标记之间插入一个块对象。 定义方式请参阅样式表语法。示例如下:

<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
</body></html>

请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。

第三种:内联定义 (Inline Styles)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p>

 
关于种豆 ┊ 联系我们 ┊ 免责声明 ┊ 发帖须知 ┊ 请提意见 ┊ 站点地图
本站为个人爱好兴趣分享网站,不代表本人观点,如有侵权请联系QQ3033380280进行处理
sowsoy.com 版权所有 Copyright©2010-2021 备案号:蜀ICP备2020025376号-3
Email:sowsoy#hotmail.com