JS動態建立css的兩種方法
動態建立css樣式有兩種方式:
1.引入外部css檔案
2.插入css程式碼片段
動態插入css外部檔案的方法:
function loadStyle(url){
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}
loadStyle('test.css');
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
動態載入css程式碼片段
function loadCssCode(code){
var style = document.createElement('style');
style.type = 'text/css';
style.rel = 'stylesheet';
//for Chrome Firefox Opera Safari
style.appendChild(document.createTextNode(code));
//for IE
//style.styleSheet.cssText = code;
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadCssCode('body{background-color:#f00}');
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
IE中標籤被視為一個特殊標籤,不能訪問其子元素,所以要使用stylesheet.cssText,使用try catch語句捕獲IE丟擲的錯誤,相容程式碼如下:
function loadCssCode(code){
var style = document.createElement('style' );
style.type = 'text/css';
style.rel = 'stylesheet';
try{
//for Chrome Firefox Opera Safari
style .appendChild(document.createTextNode(code));
}catch(ex){
//for IE
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadCssCode('body{background-color:#f00}');
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
這種方式可以實時向頁面新增樣式,所以可以立即在頁面上得意反應
相關推薦
JS動態建立css的兩種方法
動態建立css樣式有兩種方式: 1.引入外部css檔案 2.插入css程式碼片段 動態插入css外部檔案的方法: function loadStyle(url){ var link = document.createElement('link'); link
SpringBoot中使用Spring Data Jpa 實現簡單的動態查詢的兩種方法
ppr eat value table 得到 blog .net ride integer 首先謝謝大佬的簡書文章:http://www.jianshu.com/p/45ad65690e33# 這篇文章中講的是spring中使用spring data jpa,使用了xml配
執行緒 之 建立(兩種方法)和啟動
java使用Thread類代表執行緒,所有的執行緒物件都必須是Thread 類或者子類的例項。 每個執行緒的任務是完成一定的任務,就是執行一段程式流。 目前有兩種建立方式(第三種後續補充) 一種是繼承Thread類 一種是實現Runnable介面` 一、繼承Thread類 1.定
執行緒池實現執行緒的建立 的兩種方法
package cn.itcast.demo5; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; /* JDK1.5新特性,實現執行緒池程式 使用
執行緒 之 建立(兩種方法)和啟動
java使用Thread類代表執行緒,所有的執行緒物件都必須是Thread 類或者子類的例項。 每個執行緒的任務是完成一定的任務,就是執行一段程式流。 目前有兩種建立方式(第三種後續補充) 一種是繼承Thread類 一種是實現Runnable介面` 一、繼承Th
[MongoDB學習筆記-02] Node.js連線MongoDB的兩種方法
MongoDB Node.js驅動程式是被官方所支援的原生Node.js驅動程式,他是至今為止最好的實現, 並且得到了MongoDB官方的支援。MongoDB團隊已經採用MongoDB Node.js驅動程式作為標準方法。 npm install mong
單鏈表整表建立的兩種方法(頭插法和尾插法)
線性表可分為順序儲存結構和鏈式儲存結構順序儲存結構的建立,其實就是一個數組的初始化,即宣告一個型別和大小的陣列並賦值的過程。而單鏈表和順序儲存結構就不一樣,它的每個資料的儲存位置不需要像陣列那樣集中,它可以很散,是一種動態結構。對於每個連結串列來說,它所佔用的空間大小和位置並
多個java檔案共用同一動態變數的兩種方法
前言: 以前小白的我總是困惑兩個java檔案如何共用一個動態變數,今天就做一個總結 方法一: package com.Business.controller; import org.springframework.beans.factory.annotatio
vs2017建立和兩種方法使用靜態庫.lib
建立:新建專案->靜態庫新增MyLib.h標頭檔案#pragma once void printfHello();新增MyLib.cpp原始檔#include "stdafx.h" #include"MyLib.h" #include<stdio.h> v
【cocos2d-js系列問題】cocos2d-js建立幀動畫的兩種方法
不過在這之前,一定要先把圖片載入到記憶體當中去;其實你也可以不加,但是需要換另外一個函式就行; //將plist問價載入到記憶體當中 cc.spriteFrameCache.addSpriteFrames(res.play_plist); 第一種方法: 建立一個空的精靈
js+jquery動態設定/增加/刪除/獲取元素屬性的兩種方法集錦對比(動態onclick屬性設定+動態title設定)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head>
動態建立二維陣列的兩種方法
首先來講解一下什麼是二維陣列。其實二維陣列也可以說是一個一維陣列,只是這個一維陣列比較特別,它的每一個元素都是一個一維陣列。雖然二維陣列在底層是按照一維陣列的儲存方式來儲存的,即存完第一行,緊跟著存第二行,後邊依次儲存剩下的行。但是我們習慣上把它看做矩陣,一般也選擇讓他以矩
js數組去重的兩種方法
遍歷 方法 doc 思路 i++ 代碼 數組去重 -- length 數組去重這種問題經常會遇到,解決方法也有很多,這裏就總結兩種比較常用的方法。 方法一 第一種方法的思路:遍歷數組裏的元素,由第一個元素開始依次按照順序與其後面的元素相比較,如果不同則不
js阻止事件冒泡的兩種方法
type print mil opp name sel code read lib 一、冒泡事件簡介 當我們點擊一個控件的時候,如果包括這個控件的父控件也有click事件,則會繼續執行。 方法一:event.stopPropagation( ); 例如: <div
跨域問題相關知識詳解(原生js和jquery兩種方法實現jsonp跨域)
syn con 加載 developer 兩種方法 ray exe 編寫 分組 1、同源策略 同源策略(Same origin policy),它是由Netscape提出的一個著名的安全策略。同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽
js阻止表單提交的兩種方法
js阻止表單提交的兩種方法<body> <form action="clock.html" method="post" onsubmit="return checkLength()"> <p>name:<input type="text" na
CSS實現背景圖尺寸不隨瀏覽器縮放而變化的兩種方法
簡單 fix chrom per 實現 瀏覽器 webkit 只需要 div 方法一. 把圖片作為background 有幾個CSS的屬性要提一下:background-size:cover,這個CSS3的屬性作用是把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域,背景
easyui combobox 動態加載的兩種方法
while sage val addclass mbo class urn var ray reload 方法 javascript代碼 //指定id 和 text 否則始終選擇第一個 $(‘#contact_city‘).combobox({
兩種方法實現在HTML頁面加載完畢後運行某個js
功能性 下載 事件 兩種 一點 方法 實現 代碼 寬度 js方法: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(user
【微信小程式】在js中匯入第三方js或自己寫的js,使用外部js中的function的兩種方法 import和require的區別使用方法
如下 定義了一個外部js檔案,其中有一個function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync("ctx"); var filter = "/ms-code"; var apis