Làm cách nào để tải lên các tệp CSS bằng Javascript?


230

Có thể nhập bảng định kiểu CSS vào trang html bằng Javascript không? Nếu vậy, làm thế nào nó có thể được thực hiện?

PS javascript sẽ được lưu trữ trên trang web của tôi, nhưng tôi muốn người dùng có thể đặt trong thẻ <head> của trang web của họ và nó sẽ có thể nhập tệp css được lưu trữ trên máy chủ của tôi vào trang web hiện tại . (cả tệp css và tệp javascript sẽ được lưu trữ trên máy chủ của tôi).

  0

Ngoài ra còn có câu hỏi về jQuery http://stackoverflow.com/questions/2685614/load-external-css-file-like -scripts-in-jquery-which-is-compatible-in-ie-cũng là 27 aug. 122012-08-27 10:10:19

319

Đây là cách "trường học cũ" làm việc đó, hy vọng hoạt động trên tất cả các trình duyệt. Về lý thuyết, bạn sẽ sử dụng setAttribute tiếc là IE6 không hỗ trợ nó một cách nhất quán.

var cssId = 'myCss'; // you could encode the css path itself to generate id.. 
if (!document.getElementById(cssId)) 
{ 
    var head = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.id = cssId; 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = 'http://website.com/css/stylesheet.css'; 
    link.media = 'all'; 
    head.appendChild(link); 
} 

Ví dụ này kiểm tra xem CSS đã được thêm sao cho chỉ thêm một lần.

Đặt mã đó vào tệp javascript, yêu cầu người dùng cuối chỉ cần bao gồm javascript và đảm bảo đường dẫn CSS tuyệt đối để nó được tải từ máy chủ của bạn.

VanillaJS

Dưới đây là một ví dụ sử dụng đồng bằng Javascript để tiêm một liên kết CSS vào các yếu tố head dựa trên phần tên tập tin của URL:

<script type="text/javascript"> 
var file = location.pathname.split("/").pop(); 

var link = document.createElement("link"); 
link.href = file.substr(0, file.lastIndexOf(".")) + ".css"; 
link.type = "text/css"; 
link.rel = "stylesheet"; 
link.media = "screen,print"; 

document.getElementsByTagName("head")[0].appendChild(link); 
</script> 

Chèn mã ngay trước thẻ đóng head và CSS sẽ được tải trước khi trang được hiển thị. Sử dụng tệp JavaScript bên ngoài (.js) sẽ làm cho Flash có nội dung chưa được đặt trước (FOUC) xuất hiện.

+5

Điều gì về việc chạy một cuộc gọi lại khi tệp CSS đã được tải? 19 jun. 122012-06-19 03:59:14

+1

Điều này khá phức tạp để thực hiện một cách đáng tin cậy. Các thư viện Javascript phổ biến hiện nay thường có một số hình thức tải javascript và stylesheets với một cuộc gọi lại. Ví dụ, xem [YUI Get] (http://yuilibrary.com/yui/docs/get/). 05 aug. 122012-08-05 12:42:16

  0

Xem [Ext.util.CSS.swapStyleSheet] (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.CSS-method-swapStyleSheet) cho thư viện Ext JS 12 feb. 132013-02-12 08:50:32

+9

có lẽ tốt hơn nên sử dụng ký tự khác với $ cho lối tắt tài liệu, vì nó có thể can thiệp vào jQuery dễ dàng (như trong trường hợp của tôi);) 04 sep. 132013-09-04 07:44:20

+2

@ zathrus-writer Thử jQuery.noConflic(); http://api.jquery.com/jQuery.noConflict/ 21 nov. 132013-11-21 06:20:37

+1

@jonnybojangles Sử dụng jQuery.noConflict có nghĩa là đổi tên tất cả các tham chiếu của bạn thành jQuery là $. Nó sẽ đơn giản hơn rất nhiều khi sử dụng một tên biến khác cho trình tải CSS. 04 jun. 142014-06-04 15:59:09

  0

@jchook Tôi đã có thể đính kèm gọi lại bằng cách thêm 'link.onload = function() {...}' trước khi thêm 22 oct. 142014-10-22 18:10:25

  0

tôi đã thử mã này nhưng không hoạt động đúng cách 15 aug. 152015-08-15 06:57:51

  0

Tuyệt vời. Nó hoạt động trong chrome! 08 dec. 152015-12-08 05:29:08

  0

Thật không may điều này không hoạt động nữa. 23 apr. 172017-04-23 15:09:06

  0

[Làm thế nào để tải bằng cách sử dụng jQuery] (https://stackoverflow.com/a/2685661/4632019) 26 feb. 182018-02-26 11:10:09


45

Tôi đoán một cái gì đó giống như kịch bản này sẽ làm:

<script type="text/javascript" src="/js/styles.js"></script> 

này JS tập tin chứa các tuyên bố sau:

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">'); 

Địa chỉ của javascript và css sẽ cần phải được tuyệt đối nếu họ để tham khảo trang web của bạn.

Nhiều kỹ thuật nhập CSS được thảo luận trong bài viết "Say no to CSS hacks with branching techniques" này.

Nhưng bài viết "Using JavaScript to dynamically add Portlet CSS stylesheets" cũng đề cập đến khả năng CreateStyleSheet (phương pháp độc quyền cho IE):

<script type="text/javascript"> 
//<![CDATA[ 
if(document.createStyleSheet) { 
    document.createStyleSheet('http://server/stylesheet.css'); 
} 
else { 
    var styles = "@import url(' http://server/stylesheet.css ');"; 
    var newSS=document.createElement('link'); 
    newSS.rel='stylesheet'; 
    newSS.href='data:text/css,'+escape(styles); 
    document.getElementsByTagName("head")[0].appendChild(newSS); 
} 
//]]> 
  0

đây là những gì tôi đưa ra để thêm 'document.createStyleSheet()' vào các trình duyệt không có nó: http://stackoverflow.com/question/524696/how-to-create-a-style-tag-với-javascript/524798 # 524798 22 feb. 092009-02-22 22:16:03

  0

Cảm ơn bạn đã gửi phản hồi này 22 feb. 092009-02-22 22:51:46

+1

Không chắc chắn chính xác trong trường hợp nào, nhưng trong một số trường hợp, 'document.write' isn ' t được đề xuất vì nó kết thúc viết toàn bộ nội dung trang web của bạn. 12 aug. 132013-08-12 11:18:45

  0

@VonC, Có chức năng trực tiếp lấy phần tử '<style>' thay vì giả sử nó là con đầu tiên của '<head>' qua '(" đầu ") [0]'? 30 apr. 142014-04-30 18:32:33

  0

@Pacerier Tôi tin rằng bạn sẽ thấy rằng thảo luận trong https://groups.google.com/forum/#!topic/prototype-scriptaculous/Bs_JYNpoC-k. Đó sẽ là ví dụ: 'var style = document.getElementsByTagName (" style ") [0];' 30 apr. 142014-04-30 19:53:57

  0

document.write (url) làm việc cho tôi !! 13 jul. 152015-07-13 10:24:30


1

Bạn có thể sử dụng cho YUI library này hoặc sử dụng này article to implement


2

Các YUI library có thể được những gì bạn đang tìm kiếm . Nó cũng hỗ trợ tải miền chéo.

Nếu bạn sử dụng jquery, this plugin cũng làm như vậy.


3

Có một plugin jquery chung tải các tệp css và JS đồng bộ và theo yêu cầu. Nó cũng theo dõi những gì đã được tải :) xem: http://code.google.com/p/rloader/


7

Tôi biết đây là một chủ đề khá cũ nhưng ở đây có 5 xu của tôi.

Có một cách khác để thực hiện việc này tùy thuộc vào nhu cầu của bạn.

Tôi có trường hợp tôi muốn tệp css chỉ hoạt động trong một thời gian. Giống như chuyển đổi css. Kích hoạt css và sau đó sau một sự kiện khác làm dấy lên nó.

Thay vì tải css động và sau đó xóa nó, bạn có thể thêm lớp/id vào trước tất cả các phần tử trong css mới và sau đó chỉ chuyển lớp/id của nút cơ sở của css của bạn (như thẻ body).

Bạn sẽ có giải pháp này có nhiều tệp css ban đầu được tải nhưng bạn có cách chuyển động css năng động hơn.


13

Gọi hàm sau để tải động tệp CSS hoặc JavaScript.

function loadjscssfile(filename, filetype) { 
    if (filetype == "js") { //if filename is a external JavaScript file 
    // alert('called'); 
    var fileref = document.createElement('script') 
    fileref.setAttribute("type", "text/javascript") 
    fileref.setAttribute("src", filename) 
    alert('called'); 
    } else if (filetype == "css") { //if filename is an external CSS file 
    var fileref = document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
    } 
    if (typeof fileref != "undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

Vượt qua đường dẫn tệp đầy đủ có tên là đối số filename.


0
var fileref = document.createElement("link") 
fileref.setAttribute("rel", "stylesheet") 
fileref.setAttribute("type", "text/css") 
fileref.setAttribute("th:href", "@{/filepath}") 
fileref.setAttribute("href", "/filepath") 

Tôi đang sử dụng thymeleaf và điều này có hiệu quả. Cảm ơn


3

Đây là một cách có phương pháp tạo ra yếu tố của jQuery (sở thích của tôi) và với callback onLoad:

var css = $("<link>", { 
    "rel" : "stylesheet", 
    "type" : "text/css", 
    "href" : "style.css" 
})[0]; 

css.onload = function(){ 
    console.log("CSS IN IFRAME LOADED"); 
}; 

document 
    .getElementsByTagName("head")[0] 
    .appendChild(css); 

42

Nếu bạn sử dụng jquery:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">'); 

1

Dưới một mã đầy đủ sử dụng cho tải JS và/hoặc CSS

function loadScript(directory, files){ 
    var head = document.getElementsByTagName("head")[0] 
    var done = false 
    var extension = '.js' 
    for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script") 
    script.src = path   
    script.type = "text/javascript" 
    script.onload = script.onreadystatechange = function() { 
     if (!done && (!this.readyState || 
      this.readyState == "loaded" || this.readyState == "complete")) { 
      done = true 
      script.onload = script.onreadystatechange = null // cleans up a little memory: 
      head.removeChild(script) // to avoid douple loading 
     } 
    }; 
    head.appendChild(script) 
    done = false 
} 
} 

function loadStyle(directory, files){ 
    var head = document.getElementsByTagName("head")[0] 
    var extension = '.css' 
    for (var file of files){ 
    var path = directory + file + extension 
    var link = document.createElement("link") 
    link.href = path   
    link.type = "text/css" 
    link.rel = "stylesheet" 
    head.appendChild(link) 
} 
} 

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main']))(); 
(() => loadScript('scripts/', ['index']))(); 

(() => loadStyle('styles/', ['index']))(); 

5

Nếu bạn muốn biết (hoặc đợi) cho đến khi phong cách itse lf đã nạp làm việc này:

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge 
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback) 

let fetchStyle = function(url) { 
    return new Promise((resolve, reject) => { 
    let link = document.createElement('link'); 
    link.type = 'text/css'; 
    link.rel = 'stylesheet'; 
    link.onload = function() { resolve(); console.log('style has loaded'); }; 
    link.href = url; 

    let headScript = document.querySelector('script'); 
    headScript.parentNode.insertBefore(link, headScript); 
    }); 
}; 
  0

làm cách nào để tôi sử dụng 21 jul. 172017-07-21 08:27:43


1

Sử dụng mã này:

var element = document.createElement("link"); 
element.setAttribute("rel", "stylesheet"); 
element.setAttribute("type", "text/css"); 
element.setAttribute("href", "external.css"); 
document.getElementsByTagName("head")[0].appendChild(element);