JavaScript修改css中style,className,cssText实例

用 Javascript 修改网页样式

一、局部改变样式,分为改变直接样式,改变className和改变cssText三种。

需要注意的是:注意大小写问题
javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果。
调用方法:
改变className,则事先需要在样式表中申明类,调用时不要再跟style,例如:

 document.getElementById('obj').style.className="…"的写法是错误的!
 
 document.getElementById('obj').className="…" 才是正确的写法!

改变cssText
但是如果用cssText的话,必须加上style,正确的写法是:

 document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";

改变直接样式,大家记得要写到具体样式即可,如

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

二、全局改变样式

通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是"改变模板风格"。这时候我们首先需要赋予需要改变的目标一个id,如
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />

调用时很简单,如
<span οnclick="javascript:document.getElementById('css').href='ie.css'">点我改变样式</span>

对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。

知识补充:
通常在网页中样式表的调用方法有三种。
第一种:链入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:
<head>
<title>文档标题</title>
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
</head>

而在XML中,你应该如下例所示在声明区中加入:
<?xml-stylesheet type="text/css" href="css/demo.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:5px; margin-right:5px">这一行被增加了左右的外补丁</p>

 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值