JavaScript修改css样式style
本文最后更新于 5837 天前,其中的信息可能已经有所发展或是发生改变。

用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="..."

改变直接样式我就不必说了,大家记得要写到具体样式即可,如
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="https://kimi.pub/demo.css" type="text/css">
</link></head>
</coolcode>
而在XML中,你应该如下例所示在声明区中加入:
<coolcode linenum="off">
< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.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><p> </p>
</body></html>

评论

  1. Nice
    16年前
    2008-4-05 2:17:57

    document.getElementById(’obj’).style.className=”…”的写法是错误的!
    只能写成:=document.getElementById(’obj’).className=”…”

    这个曾经郁闷了我好久

  2. pitter
    16年前
    2008-4-05 2:20:14

    kimi总结的很好啊

  3. 16年前
    2008-4-06 18:07:22

    $().css(“”,””),最近刚学会了这个 呵呵

  4. 博主
    16年前
    2008-4-07 0:37:19

    jquery还是很不错的

  5. Nice
    16年前
    2008-4-07 18:33:47

    我最近也是在学习jquery
    大家都在搞jquery啊

  6. 16年前
    2008-8-14 16:50:18

    这个不错,已经注意到了

  7. 15年前
    2009-6-22 13:20:13

    恩。这样基本的需求是满足了,但用于产品中还欠缺如果用户刷新导致重新加载。如果有cookie的保存,那体验会更好

  8. 11年前
    2013-8-01 21:44:17

    这个一定要试一下!

  9. flz
    11年前
    2013-8-20 19:28:29

    纯小白路过,请教一个问题。
    我安装一个evernote修改左侧ad的脚本不起效果,但是复制其代码在浏览器的console里面输入立刻起效了。我理解是按道理安装脚本和在console里面输入应该是一样吧?求解一下,谢~
    脚本链接:http://userscripts.org/scripts/review/118320

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇