1. 程式人生 > >如何用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是否存在,防止重複新增
  var ss = document.createStyleSheet();
  ss.owningElement.id = '要建立的樣式表ID如theforever';
  ss.cssText = '標籤{display:inline-block;overflow:hidden;' +
   // 這個註釋只在當前JS中幫助理解,並不會寫入CSS中
   'text-align:left;width:300px;height:150px}' +
   '.類名{……}' +
   '#ID們{……}'
  ;
 }

相關推薦

如何用JavaScript動態建立增加CSS樣式

    1。簡單的方法,不管不顧,直接這樣就可以: document.createStyleSheet().cssText = '標籤{color:red;' + // 這個註

js動態生成css樣式

    有時候我們需要利用js來動態生成頁面上style標籤中的css程式碼,方法很直接,就是直接建立一個style元素,然後設定style元素裡面的css程式碼,最後把它插入到head元素中。但有些相容性問題我們需要解決。首先在符合w3c標準的瀏覽器中我們只需要把要插入的css程式碼作為一個文字節點插入到

HTML標簽_增加css樣式

html spa height link ctype utf char meta ref 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

C++ new 動態建立多維陣列

例:              int **array=new int*[n];       &nbs

JavaScript指令碼化CSS樣式

在使用JavaScript指令碼化操作CSS樣式表的時候,必須要使用到兩個物件:   1,元素物件:也就是<link>元素與<style>元素。   2,CSSStyleSheet物件:與當前文件關聯的在一起的樣式表,通過document.styleSheets獲取,該物件是隻讀的

JavaScript動態實現單元格合併

不太想描述,大家自行理解吧,這樣可能記憶會深一點兒~ <script type="text/javascript"> function mergeCells(){ var count = 0; var oldText = ''; var oldTd; var

JavaScript動態建立表格

請輸入行數: <input type="text" value="3" id="rows"> <br> 請輸入列數: <input type="text" value="4" id="cols"> <br>

Javascript 如何訪問 和 修改CSS樣式(網頁樣式)

如果想修改某個元素的CSS樣式,建議看一下我寫的另一篇文章: 注意:我說的是修改,而不是訪問。如果是修改的話可以看看上面《補充說明》這篇文章,但如果是訪問的話,就看本文中的這兩種方法,同樣,如果是訪問兼顧修改的話,也只看本文中的兩種方法(這是我瞭解到的兩種方法,如果有其

javascript動態建立Img-預設圖片

javascript動態建立Img,然後檢查狀態,載入影象失敗時使用預設圖片代替 /*圖片載入外掛*/ $.fn.imagesLoaded = function (ok_handler, error_handler) { "use strict";

使用Javascript動態建立表格,不同的方法,巨大的執行時間差異!

本來是想測試一下使用Javascript生成一個比較大的表格,大概需要多長時間,一直認為這會是一個比較固定的時間。期間用了幾種不同的方法,發現效率相差太大了。下面是測試的具體說明: 目標:生成一個2000*5的表格,每個單元格的內容是行號+逗號+列號 方法一:使用cre

js CreateElement動態建立標籤

//*************************************// //定義方法建立一個label標籤 //*************************************// var createLabel = function(id, name, value) {  

JavaScript動態建立table表格

<!DOCTYPE html> <html> <head> <title>createTable2.html</title> <style type="text/css"> table{ border:#00fff

CSS樣式

標題 百分比 比較 對齊方式 nal 表示 滾動條 pad 相關 CSS樣式表的樣式主要可以分為大小,背景,字體,對齊方式,邊界邊框,列表方塊,格式布局等。 元素的大小: #div1{ width:300px; height:100

JS 對html標簽的屬性的幹預以及JS 對CSS 樣式屬性的幹預

inpu cti doc tel tex ttext button abcd element -任何標簽的任何屬性都可以修改! -HTML裏是怎麽寫, JS就怎麽寫 以下是一段js 作用於 css 的 href的 代碼 <link id="l1"

久未更 ~ 五之 —— 引入外部CSS樣式 小節

col div ... fun class utf-8 css樣式 splay date > > > > > 久未更 系列一:在html中引入外部css樣式表 1 //引入外部css樣式表 2 //<lilnk&

css樣式--樣式分類

head 附加 鏈接 內嵌 css樣式 href nbsp tex itl 樣式表分類 1、內聯式。寫在body裏。控制精確,可重復性差。 <body> <div style="color:#90F">更好發揮的返回結果還

css樣式中的樣式覆蓋順序

精確 一個 avi 樣式 ren code spartan tor 怎樣 原文:css樣式表中的樣式覆蓋順序 有時候在寫CSS的過程中,某些限制總是不起作用,這就涉及了CSS樣式覆蓋的問題,如下 <!DOCTYPE html> <html

如果在一個標簽上兩類並用,css樣式中引用時,兩個類必須寫在一起,不能有空格。

nbsp clas div 樣式表 ext style borde 引用 order 例: <html>   <style type="text/css">     .mui-table-view-cell.mui-collapse{      bo

CSS樣式(一)

縮進 刪除 idt 表示 wid 例如 精確 優點 mage 在HTML中為各標簽加上樣式有內聯、內嵌和外部樣式表三種添加方式。內聯的是直接在標簽內添加style="樣式"即可;內嵌的是直接嵌在網頁內,在<head></head>內加入&

CSS樣式概述---運維筆記

相同 內容 因此 id選擇器 對象 內部 直接 css 註意事項 CSS是一種標記語言,因此不需要編譯,可以由瀏覽器直接執行。 樣式表分為內部樣式表與外部樣式表,由樣式規則組成,一個樣式的基本語法包括三部分:選擇器,屬性,屬性值。 選擇器:表示修飾對象,包括標簽選擇器,類選