用腳本調(diào)用樣式的幾種方法
更新時(shí)間：2006年12月09日 00:00:00 作者：
之前經(jīng)常遇見(jiàn)classname、csstext之類的詞，卻不知道如何用。最近著手網(wǎng)站實(shí)際建設(shè)，收獲頗多，給還不懂的人分享一下。
通常在網(wǎng)頁(yè)中樣式表的調(diào)用方法有四種。第一是外鏈，即<link rel="StyleSheet" href = "/control/css/base.css">的形式；第二是輸入樣式表；第三是在網(wǎng)頁(yè)頭部申明，如<head> <style type="text/css">...；最后是直接在對(duì)象后寫(xiě)樣式，即<div style = "width:80%...;">的形式。我們用腳本調(diào)用樣式，也要從這幾方面入手。
一、通常情況下，我們可以通過(guò)改變外鏈樣式的的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>
二、局部改變樣式，分為改變直接樣式，改變className和改變cssText三種。需要注意的是：第一，javascript對(duì)大小寫(xiě)十分敏感，className不能夠把“N”寫(xiě)成“n”，cssText也不能夠把“T”寫(xiě)成“t”，否則無(wú)法實(shí)現(xiàn)效果。第二，如果改變className，則事先在樣式表中申明類，但調(diào)用時(shí)不要再跟style，像
document.getElementById('obj').style.className="..."的寫(xiě)法是錯(cuò)誤的！
只能寫(xiě)成：document.getElementById('obj').className="..."
但是如果用cssText的話，必須加上style，正確的寫(xiě)法是：
document.getElementById('obj').style.cssText="..."
改變直接樣式我就不必說(shuō)了，大家記得要寫(xiě)到具體樣式即可，如
document.getElementById('obj').style.backgroundColor="#003366"
對(duì)于新人往往不知道CSS具體樣式在javascript怎么寫(xiě)，而且有時(shí)候在不同瀏覽器中要求也不一樣。如float在IE中寫(xiě)成styleFloat，在FIREFOX中寫(xiě)成cssFloat，這就需要大家的積累了。在google中搜索“JSS”，也許會(huì)對(duì)你的疑惑有所幫助。
通常在網(wǎng)頁(yè)中樣式表的調(diào)用方法有四種。第一是外鏈，即<link rel="StyleSheet" href = "/control/css/base.css">的形式；第二是輸入樣式表；第三是在網(wǎng)頁(yè)頭部申明，如<head> <style type="text/css">...；最后是直接在對(duì)象后寫(xiě)樣式，即<div style = "width:80%...;">的形式。我們用腳本調(diào)用樣式，也要從這幾方面入手。
一、通常情況下，我們可以通過(guò)改變外鏈樣式的的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>
二、局部改變樣式，分為改變直接樣式，改變className和改變cssText三種。需要注意的是：第一，javascript對(duì)大小寫(xiě)十分敏感，className不能夠把“N”寫(xiě)成“n”，cssText也不能夠把“T”寫(xiě)成“t”，否則無(wú)法實(shí)現(xiàn)效果。第二，如果改變className，則事先在樣式表中申明類，但調(diào)用時(shí)不要再跟style，像
document.getElementById('obj').style.className="..."的寫(xiě)法是錯(cuò)誤的！
只能寫(xiě)成：document.getElementById('obj').className="..."
但是如果用cssText的話，必須加上style，正確的寫(xiě)法是：
document.getElementById('obj').style.cssText="..."
改變直接樣式我就不必說(shuō)了，大家記得要寫(xiě)到具體樣式即可，如
document.getElementById('obj').style.backgroundColor="#003366"
對(duì)于新人往往不知道CSS具體樣式在javascript怎么寫(xiě)，而且有時(shí)候在不同瀏覽器中要求也不一樣。如float在IE中寫(xiě)成styleFloat，在FIREFOX中寫(xiě)成cssFloat，這就需要大家的積累了。在google中搜索“JSS”，也許會(huì)對(duì)你的疑惑有所幫助。
相關(guān)文章
解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題
這篇文章主要給大家介紹了關(guān)于如何解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題的相關(guān)資料,xlsx.js是一種前端庫(kù),它可以使您使用JavaScript讀取、解析和導(dǎo)出電子表格文件,如Microsoft Excel,需要的朋友可以參考下2024-03-03
javascript中checkbox使用方法簡(jiǎn)單實(shí)例演示
這篇文章通過(guò)簡(jiǎn)單的實(shí)例演示了javascript中checkbox使用方法，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了RxJS在TypeScript中的簡(jiǎn)單使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了如何用JS求Number類型數(shù)組中最大元素2018-04-04
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版，這里提供了兩個(gè)版本，第二個(gè)在firefox下運(yùn)行有些問(wèn)題大家可以修改下，第一個(gè)的高度問(wèn)題，已經(jīng)修正，其實(shí)就是簡(jiǎn)單的加了css樣式。2009-12-12
獲取radio選中后的值，這在提交頁(yè)面經(jīng)常會(huì)使用到的，在本文為大家介紹下不選擇也能獲取radio的值，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-10-10
詳解webpack與SPA實(shí)踐之開(kāi)發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack與SPA實(shí)踐之開(kāi)發(fā)環(huán)境搭建,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
本文介紹了如何自定義trim方法，trim的作用就是去除字符串前后空格,這個(gè)方法在字符串處理方面很有實(shí)用價(jià)值，需要的朋友可以參考下2015-07-07
WebView啟動(dòng)支付寶客戶端支付失敗的問(wèn)題小結(jié)
這篇文章主要介紹了WebView啟動(dòng)支付寶客戶端支付失敗的問(wèn)題小結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript實(shí)現(xiàn)數(shù)字格式化的示例詳解
在處理數(shù)字時(shí),為了提高可讀性,我們通常會(huì)將整數(shù)部分的數(shù)字以千分位或百分位分隔,本文將詳細(xì)介紹如何使用JavaScript來(lái)實(shí)現(xiàn)數(shù)字的千分位和百分位分隔,需要的可以參考下2024-04-04