JavaScript修改css樣式style動(dòng)態(tài)改變?cè)貥邮?/h1>
更新時(shí)間：2013年12月16日 17:22:18 投稿：whsnow
修改css樣式style在某些情況下還是比較實(shí)用的，可以動(dòng)態(tài)改變一些樣式，接下來為大家介紹下使用JavaScript是如何做到的
一、局部改變樣式
分為改變直接樣式，改變className和改變cssText三種。需要注意的是：
注意大小寫：
javascript對(duì)大小寫十分敏感，className不能夠把“N”寫成“n”，cssText也不能夠把“T”寫成“t”，否則無法實(shí)現(xiàn)效果。
調(diào)用方法：
如果改變className，則事先在樣式表中申明類，但調(diào)用時(shí)不要再跟style，像document.getElementById('obj').style.className=”…”的寫法是錯(cuò)誤的！只能寫成：document.getElementById('obj').className=”…”
改變cssText
但是如果用cssText的話，必須加上style，正確的寫法是：document.getElementById('obj').style.cssText=”…”
改變直接樣式我就不必說了，大家記得要寫到具體樣式即可，如
復(fù)制代碼 代碼如下:
document.getElementById('obj').style.backgroundColor=”#003366″
二、全局改變樣式
通常情況下，我們可以通過改變外鏈樣式的的href的值實(shí)現(xiàn)網(wǎng)頁樣式的實(shí)時(shí)切換，也就是“改變模板風(fēng)格”。這時(shí)候我們首先需要賦予需要改變的目標(biāo)一個(gè)id，如
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
調(diào)用時(shí)很簡(jiǎn)單，如
<span on click="javascript:document.getElementById('css').href = 'ie.css'">點(diǎn)我改變樣式</span>
對(duì)于新人往往不知道CSS具體樣式在javascript怎么寫，而且有時(shí)候在不同瀏覽器中要求也不一樣。如float在IE中寫成styleFloat，在FIREFOX中寫成cssFloat，這就需要大家的積累了。在google中搜索“ccvita javascript”，也許會(huì)對(duì)你的疑惑有所幫助。
基礎(chǔ)知識(shí)
通常在網(wǎng)頁中樣式表的調(diào)用方法有三種。
第一種：鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然后使用HTML的link對(duì)象。示例如下：
復(fù)制代碼 代碼如下:
<head>
<title>文檔標(biāo)題</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
而在XML中，你應(yīng)該如下例所示在聲明區(qū)中加入：
復(fù)制代碼 代碼如下:
< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
第二種：定義內(nèi)部樣式塊對(duì)象 (Embedding a Style Block)
你可以在你的HTML文檔的和標(biāo)記之間插一個(gè)
塊對(duì)象。 定義方式請(qǐng)參閱樣式表語法。示例如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>文檔標(biāo)題</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>
請(qǐng)注意，這里將style對(duì)象的type屬性設(shè)置為”text/css”，是允許不支持這類型的瀏覽器忽略樣式表單。
第三種：內(nèi)聯(lián)定義 (Inline Styles)
內(nèi)聯(lián)定義即是在對(duì)象的標(biāo)記內(nèi)使用對(duì)象的style屬性定義適用其的樣式表屬性。示例如下：
復(fù)制代碼 代碼如下:
<p style="margin-left: 0.5in; margin-right:0.5in">這一行被增加了左右的外補(bǔ)丁</p><p> </p>
相關(guān)文章
-
在本篇內(nèi)容中小編給各位分享的是關(guān)于如何使用JS控制下拉列表左右選擇的實(shí)例代碼，需要的朋友們可以參考下。 2020-05-05
-
js 聲明數(shù)組和向數(shù)組中添加對(duì)象變量的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s 聲明數(shù)組和向數(shù)組中添加對(duì)象變量的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧 2016-07-07
-
這篇文章主要為大家介紹了js前端獲取用戶位置及ip屬地信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪 2022-07-07
-
JavaScript 題型問答有答案參考，都是一些開發(fā)中容易碰到的問題。 2010-02-02
-
使用reflect-metadata實(shí)現(xiàn)數(shù)據(jù)校驗(yàn)與日志記錄
在?TypeScript?生態(tài)系統(tǒng)中,reflect-metadata?庫是一種強(qiáng)大的工具,它允許我們?cè)谶\(yùn)行時(shí)獲取更多的類型信息,下面我們來看看如何在前端項(xiàng)目中使用reflect-metadata以及它能實(shí)現(xiàn)的能力吧 2024-12-12
-
這篇文章主要介紹了微信小游戲中three.js離屏畫布的示例代碼,主要是用three.js結(jié)合cannon.js寫個(gè)3D小游戲，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下 2020-10-10
-
js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE和FF
js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE FF，大家可以看看。 2009-07-07
-
這篇文章主要介紹了按鈕接受回車事件的三種實(shí)現(xiàn)方法,需要的朋友可以參考下 2014-06-06
-
JS實(shí)現(xiàn)的自定義右鍵菜單實(shí)例二則
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義右鍵菜單,以兩則實(shí)例形式分析了javascript自定義右鍵菜單效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下 2015-09-09
-
在客戶端存儲(chǔ)數(shù)據(jù)時(shí)，我們一般都用cookie(不敏感數(shù)據(jù))，但是在客戶端越來越富的今天，cookie可存儲(chǔ)的量(每個(gè)域最大4k)實(shí)在是小,已經(jīng)滿足不了我們的需求 2012-11-11
最新評(píng)論
一、局部改變樣式
分為改變直接樣式，改變className和改變cssText三種。需要注意的是：
注意大小寫：
javascript對(duì)大小寫十分敏感，className不能夠把“N”寫成“n”，cssText也不能夠把“T”寫成“t”，否則無法實(shí)現(xiàn)效果。
調(diào)用方法：
如果改變className，則事先在樣式表中申明類，但調(diào)用時(shí)不要再跟style，像document.getElementById('obj').style.className=”…”的寫法是錯(cuò)誤的！只能寫成：document.getElementById('obj').className=”…”
改變cssText
但是如果用cssText的話，必須加上style，正確的寫法是：document.getElementById('obj').style.cssText=”…”
改變直接樣式我就不必說了，大家記得要寫到具體樣式即可，如
復(fù)制代碼 代碼如下:
document.getElementById('obj').style.backgroundColor=”#003366″
二、全局改變樣式
通常情況下，我們可以通過改變外鏈樣式的的href的值實(shí)現(xiàn)網(wǎng)頁樣式的實(shí)時(shí)切換，也就是“改變模板風(fēng)格”。這時(shí)候我們首先需要賦予需要改變的目標(biāo)一個(gè)id，如
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
調(diào)用時(shí)很簡(jiǎn)單，如
<span on click="javascript:document.getElementById('css').href = 'ie.css'">點(diǎn)我改變樣式</span>
對(duì)于新人往往不知道CSS具體樣式在javascript怎么寫，而且有時(shí)候在不同瀏覽器中要求也不一樣。如float在IE中寫成styleFloat，在FIREFOX中寫成cssFloat，這就需要大家的積累了。在google中搜索“ccvita javascript”，也許會(huì)對(duì)你的疑惑有所幫助。
基礎(chǔ)知識(shí)
通常在網(wǎng)頁中樣式表的調(diào)用方法有三種。
第一種：鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然后使用HTML的link對(duì)象。示例如下：
復(fù)制代碼 代碼如下:
<head>
<title>文檔標(biāo)題</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
而在XML中，你應(yīng)該如下例所示在聲明區(qū)中加入：
復(fù)制代碼 代碼如下:
< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
第二種：定義內(nèi)部樣式塊對(duì)象 (Embedding a Style Block)
你可以在你的HTML文檔的和標(biāo)記之間插一個(gè)
塊對(duì)象。 定義方式請(qǐng)參閱樣式表語法。示例如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>文檔標(biāo)題</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>
請(qǐng)注意，這里將style對(duì)象的type屬性設(shè)置為”text/css”，是允許不支持這類型的瀏覽器忽略樣式表單。
第三種：內(nèi)聯(lián)定義 (Inline Styles)
內(nèi)聯(lián)定義即是在對(duì)象的標(biāo)記內(nèi)使用對(duì)象的style屬性定義適用其的樣式表屬性。示例如下：
復(fù)制代碼 代碼如下:
<p style="margin-left: 0.5in; margin-right:0.5in">這一行被增加了左右的外補(bǔ)丁</p><p> </p>
相關(guān)文章
- 在本篇內(nèi)容中小編給各位分享的是關(guān)于如何使用JS控制下拉列表左右選擇的實(shí)例代碼，需要的朋友們可以參考下。2020-05-05
-
js 聲明數(shù)組和向數(shù)組中添加對(duì)象變量的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s 聲明數(shù)組和向數(shù)組中添加對(duì)象變量的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07 - 這篇文章主要為大家介紹了js前端獲取用戶位置及ip屬地信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
- JavaScript 題型問答有答案參考，都是一些開發(fā)中容易碰到的問題。2010-02-02
-
使用reflect-metadata實(shí)現(xiàn)數(shù)據(jù)校驗(yàn)與日志記錄
在?TypeScript?生態(tài)系統(tǒng)中,reflect-metadata?庫是一種強(qiáng)大的工具,它允許我們?cè)谶\(yùn)行時(shí)獲取更多的類型信息,下面我們來看看如何在前端項(xiàng)目中使用reflect-metadata以及它能實(shí)現(xiàn)的能力吧2024-12-12 - 這篇文章主要介紹了微信小游戲中three.js離屏畫布的示例代碼,主要是用three.js結(jié)合cannon.js寫個(gè)3D小游戲，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-10-10
-
js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE和FF
js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE FF，大家可以看看。2009-07-07 - 這篇文章主要介紹了按鈕接受回車事件的三種實(shí)現(xiàn)方法,需要的朋友可以參考下2014-06-06
-
JS實(shí)現(xiàn)的自定義右鍵菜單實(shí)例二則
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義右鍵菜單,以兩則實(shí)例形式分析了javascript自定義右鍵菜單效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09 - 在客戶端存儲(chǔ)數(shù)據(jù)時(shí)，我們一般都用cookie(不敏感數(shù)據(jù))，但是在客戶端越來越富的今天，cookie可存儲(chǔ)的量(每個(gè)域最大4k)實(shí)在是小,已經(jīng)滿足不了我們的需求2012-11-11