導航:首頁 > 編程語言 > js中怎麼設置css樣式

js中怎麼設置css樣式

發布時間:2024-11-22 21:46:04

A. 怎麼在js中給文本框添加CSS樣式

在頁面內用JS操作CSS除非用AJAX,但操作頁面內的樣式的話,是可以的。操作樣式分回為改變直接樣式,答改變className和改變cssText三種
一、局部改變樣式
調用方法:
改變className
<div id="demo">測試</div>
<script>
document.getElementById('demo').className="test";
</script>
改變直接樣式
<div id="demo">測試</div>
<script>
document.getElementById('obj').style.backgroundColor="#003366";
</script>

二、全局改變樣式

可以通過改變外鏈樣式的的href的值實現網頁樣式的實時切換

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
<span on click="javascript:document.getElementById('css').href = 'ie.css'">點我改變樣式</span>

B. 如何用JS修改已載入的CSS樣式表樣式要詳細的教程

修改已載入的樣式表?這是要做什麼, JS不能修改樣式表,只可以修改對象的樣式屬性。還是說你修改了樣式表頁面卻沒有發生變化?如果是這樣有2個辦法,清緩存,或是給樣式表標簽添加參數。

C. javascript如何添加css類

JavaScript動態建立或增加CSS樣式表,參考如下:

1、簡單的方法:

document.createStyleSheet().cssText='標簽{color:red;'+
//這個注釋只在當前JS中幫助理解,並不會寫入CSS中
'width:300px;height:150px}'+
'.類名{……}'+
'#ID們{……}'

2、比較完美的方法,防止重復添加,通過添加樣式表ID並對其判斷來實現:

if(!document.styleSheets['要建立的樣式表ID如theforever']){//先檢查要建立的樣式表ID是否存在,防止重復添加
varss=document.createStyleSheet();
ss.owningElement.id='要建立的樣式表ID如theforever';
ss.cssText='標簽{display:inline-block;overflow:hidden;'+
//這個注釋只在當前JS中幫助理解,並不會寫入CSS中
'text-align:left;width:300px;height:150px}'+
'.類名{……}'+
'#ID們{……}'
;
}

D. JS修改CSS設置的樣式

語法:元素.style.樣式名=樣式值

注意:如果CSS的樣式名中含有-,這種名稱在JS中是不合法的,比如 background-color 。需要將這種樣式名修改為駝峰命名法:去掉-,然後將-後的第一個字母大寫,比如 backgroundColor

我們通過style屬性設置的樣式都是內聯樣式,而內聯樣式有較高的優先順序,所以通過JS修改的樣式往往會立即顯示
但是如果在樣式中寫了!important,則此時樣式會有最高的優先順序,即使通過JS也不能覆蓋該樣式,此時將會導致JS修改樣式失效
所以盡量不要為樣式添加!important

語法:元素.style.樣式名
通過style屬性設置和讀取的都是內聯樣式,無法讀取樣式表中的樣式

語法:元素.currentStyle.樣式名
如果當前元素沒有設置該樣式,則獲取它的默認值
例如: box1.currentStyle.width

這個方法是window的方法,可以直接使用需要兩個參數
第一個:要獲取樣式的元素
第二個:可以傳遞一個偽元素,一般都傳null

該方法會返回一個對象,對象中封裝了當前元素對應的樣式
可以通過對象﹒樣式名來讀取樣式

如果獲取的 樣式沒有設置 ,則會獲取到真實的值,而不是默認值
比如:沒有設置width,它不會獲取到auto,而是 一個長度

注意:通過currentStyle和getComputedstyle()讀取到的樣式都是只讀的,不能修改,如果要修改必須通過style屬性

參數:
obj 要獲取樣式的元素
name 要獲取的樣式名

E. 建站知識:如何使用JS來自由切換css樣式表

詳細方法如下: 第一步:在連接樣式表的元素里定義一個id,例如 <link href="1.css" rel="stylesheet" type="text/css" id="css"> 我定義的id是css。 第二步:寫一個js函數,代碼如下: <script type="text/javascript"> function change(a){ var css=document.getElementById("css"); if (a==1) css.setAttribute("href","1.css"); if (a==2) css.setAttribute("href","2.css");}</script>這個函數的code可以放在頁面的任何地方。 第三步:為改變頁面的樣式表的連接添加一個函數的觸發事件,代碼如下: <a href="#" onClick="change(1)">1.css</a> <a href="#" onClick="change(2)">2.css</a> 該效果在IE和FF下均測試通過,相信大家看完後因該非常明了,利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表,好比年邁者可以選擇一個字體較大的樣式表。這里需要留意的兩點是:另外假如是改變整個頁面的樣式,你需要在樣式表文件里定義body的高度為100%

F. js如何更改css樣式,

請看以下例子:
<html>
<head>
<meta charset="utf-8">
<title>exp</title>
<style>
p{
background-image:url(寫你的圖片url);
}
</style>
</head>
<body>
<p id="p"></p>
<a href="javascript:void(0);" onclick="hideImg()">點擊我隱藏</a>
<a href="javascript:void(0);" onclick="showImg()">點擊我顯示</a>
<a href=" http://www.dadaxun.com/">達達尋</a>
</body>
</html>
<script>
function hideImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "";
}

function showImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "url(寫你的圖片url)";
}
</script>

達達尋 dadaxun 為你解答

G. 如何使用JS來改變CSS樣式

這位網友你好,首先你需要獲取到要改變的元素,然後再修改其樣式,語法如下:

var obj = document.getElementById("要改變的元素id");
obj.style.屬性 = 屬性值;

閱讀全文

與js中怎麼設置css樣式相關的資料

熱點內容
文件夾的相片如何列印出來 瀏覽:84
mpg文件如何刻錄dvd 瀏覽:801
win10edge注冊表 瀏覽:309
cad圖形如何復制到另一個文件中 瀏覽:775
sim文件在手機上用什麼打開 瀏覽:183
ubunturoot文件夾 瀏覽:745
手機文件誤刪能否恢復數據 瀏覽:955
照片文件名中的數字代表什麼 瀏覽:44
cs6裁切工具 瀏覽:235
資料庫超過多少數據會卡 瀏覽:858
CAD落圖文件 瀏覽:125
怎樣翻譯文件內容 瀏覽:679
戴爾r910安裝linux 瀏覽:69
有線電視升級失敗 瀏覽:560
火絨安全把文件刪掉了在哪裡找 瀏覽:503
手機qq網路狀態方框 瀏覽:225
哪裡有文件紙袋 瀏覽:873
復制的東西能不能粘貼到空文件夾 瀏覽:876
酒店沒有網路如何繳費 瀏覽:380
win10開機滾動很久 瀏覽:520

友情鏈接