JavaScript修改css樣式style動(dòng)態(tài)改變?cè)貥邮?/h1>
更新時(shí)間:2013年12月16日 17:22:18 投稿:whsnow
修改css樣式style在某些情況下還是比較實(shí)用的,可以動(dòng)態(tài)改變一些樣式,接下來(lái)為大家介紹下使用JavaScript是如何做到的
一、局部改變樣式
分為改變直接樣式,改變className和改變cssText三種。需要注意的是:
注意大小寫:
javascript對(duì)大小寫十分敏感,className不能夠把“N”寫成“n”,cssText也不能夠把“T”寫成“t”,否則無(wú)法實(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=”…”
改變直接樣式我就不必說(shuō)了,大家記得要寫到具體樣式即可,如
復(fù)制代碼 代碼如下:
document.getElementById('obj').style.backgroundColor=”#003366″
二、全局改變樣式
通常情況下,我們可以通過改變外鏈樣式的的href的值實(shí)現(xiàn)網(wǎng)頁(yè)樣式的實(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)頁(yè)中樣式表的調(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)參閱樣式表語(yǔ)法。示例如下:
復(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)文章
-
JS實(shí)現(xiàn)上下左右對(duì)稱的九九乘法表
九九乘法表使用很多種語(yǔ)言都可以實(shí)現(xiàn),本文給大家介紹js使用for、while循環(huán)來(lái)完成四種對(duì)稱的九九乘法表,對(duì)九九乘法表需要的朋友參考下 2016-02-02
-
web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時(shí)傳遞解決方案
這篇文章主要介紹了web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時(shí)傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2023-07-07
-
用js格式化金額可設(shè)置保留的小數(shù)位數(shù)
這篇文章主要介紹了如何用js格式化金額并設(shè)置保留的小數(shù)位數(shù),需要的朋友可以參考下 2014-05-05
-
在JavaScript中如何訪問暫未存在的嵌套對(duì)象
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何訪問暫未存在的嵌套對(duì)象的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
-
詳解JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置
這篇文章主要為大家介紹了JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助 2021-12-12
-
利用JS實(shí)現(xiàn)數(shù)字增長(zhǎng)
做項(xiàng)目時(shí)候常常遇到,要做一個(gè)數(shù)字滾動(dòng)增加的效果。如何利用JavaScript實(shí)現(xiàn)數(shù)字增長(zhǎng)效果,一起來(lái)跟本文學(xué)習(xí)學(xué)習(xí)。 2016-07-07
-
javascript cookies 設(shè)置、讀取、刪除實(shí)例代碼
javascript cookies 存、取、刪除實(shí)例,也是不錯(cuò)的文章,跟我們整理的有些補(bǔ)充。 2010-04-04
-
JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析
下面小編就為大家?guī)?lái)一篇JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考 2016-04-04
最新評(píng)論
一、局部改變樣式
分為改變直接樣式,改變className和改變cssText三種。需要注意的是:
注意大小寫:
javascript對(duì)大小寫十分敏感,className不能夠把“N”寫成“n”,cssText也不能夠把“T”寫成“t”,否則無(wú)法實(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=”…”
改變直接樣式我就不必說(shuō)了,大家記得要寫到具體樣式即可,如
document.getElementById('obj').style.backgroundColor=”#003366″
二、全局改變樣式
通常情況下,我們可以通過改變外鏈樣式的的href的值實(shí)現(xiàn)網(wǎng)頁(yè)樣式的實(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)頁(yè)中樣式表的調(diào)用方法有三種。
第一種:鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件(.css),然后使用HTML的link對(duì)象。示例如下:
<head>
<title>文檔標(biāo)題</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
而在XML中,你應(yīng)該如下例所示在聲明區(qū)中加入:
< ? 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)參閱樣式表語(yǔ)法。示例如下:
<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屬性定義適用其的樣式表屬性。示例如下:
<p style="margin-left: 0.5in; margin-right:0.5in">這一行被增加了左右的外補(bǔ)丁</p><p> </p>
相關(guān)文章
JS實(shí)現(xiàn)上下左右對(duì)稱的九九乘法表
九九乘法表使用很多種語(yǔ)言都可以實(shí)現(xiàn),本文給大家介紹js使用for、while循環(huán)來(lái)完成四種對(duì)稱的九九乘法表,對(duì)九九乘法表需要的朋友參考下2016-02-02web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時(shí)傳遞解決方案
這篇文章主要介紹了web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時(shí)傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07用js格式化金額可設(shè)置保留的小數(shù)位數(shù)
這篇文章主要介紹了如何用js格式化金額并設(shè)置保留的小數(shù)位數(shù),需要的朋友可以參考下2014-05-05在JavaScript中如何訪問暫未存在的嵌套對(duì)象
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何訪問暫未存在的嵌套對(duì)象的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06詳解JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置
這篇文章主要為大家介紹了JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12利用JS實(shí)現(xiàn)數(shù)字增長(zhǎng)
做項(xiàng)目時(shí)候常常遇到,要做一個(gè)數(shù)字滾動(dòng)增加的效果。如何利用JavaScript實(shí)現(xiàn)數(shù)字增長(zhǎng)效果,一起來(lái)跟本文學(xué)習(xí)學(xué)習(xí)。2016-07-07javascript cookies 設(shè)置、讀取、刪除實(shí)例代碼
javascript cookies 存、取、刪除實(shí)例,也是不錯(cuò)的文章,跟我們整理的有些補(bǔ)充。2010-04-04JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析
下面小編就為大家?guī)?lái)一篇JS彈出層遮罩,隱藏背景頁(yè)面滾動(dòng)條細(xì)節(jié)優(yōu)化分析。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04