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