Thêm biểu định kiểu vào Đầu bằng javascript trong phần thân

Question

Tôi đang làm việc với CMS ngăn chúng tôi chỉnh sửa phần đầu. Tôi cần phải thêm bản định kiểu CSS vào trang web, ngay sau thẻ. Có cách nào để làm điều này với JS, nơi tôi có thể thêm một kịch bản vào dưới cùng của trang (tôi có quyền truy cập để thêm kịch bản ngay trước thẻ) mà sau đó sẽ tiêm các stylesheet vào phần đầu?

Answer 1

Cập nhật: Theo specs, phần tử link không được phép trong phần thân. Tuy nhiên, hầu hết các trình duyệt vẫn sẽ hiển thị nó tốt. Vì vậy, để trả lời các câu hỏi trong phần nhận xét - người thực sự phải thêm link vào trang head của trang chứ không phải body.

function addCss(fileName) { 

    var head = document.head; 
    var link = document.createElement("link"); 

    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    link.href = fileName; 

    head.appendChild(link); 
} 

addCss('{my-url}'); 

Hoặc một chút dễ dàng hơn với jquery

function addCss(fileName) { 
    var link = $("<link />",{ 
    rel: "stylesheet", 
    type: "text/css", 
    href: fileName 
    }) 
    $('head').append(link); 
} 

addCss("{my-url}"); 

---

câu trả lời gốc:

Bạn không cần thiết phải bổ sung nó vào đầu, chỉ cần thêm nó vào cuối thẻ body.

$('body').append('<link rel="stylesheet" type="text/css" href="{url}">') 

như Juan Mendes đã đề cập, bạn có thể chèn stylesheet vào đầu thay vì

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">') 

Và cùng mà không jQuery (xem mã trên)

Answer 2

này sẽ làm những gì bạn muốn trong một thông minh đường. Cũng sử dụng JS thuần túy.

function loadStyle(href, callback){ 
    // avoid duplicates 
    for(var i = 0; i < document.styleSheets.length; i++){ 
     if(document.styleSheets[i].href == href){ 
      return; 
     } 
    } 
    var head = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = href; 
    if (callback) { link.onload = function() { callback() } } 
    head.appendChild(link); 
} 

Answer 3

Tôi đã sửa đổi chức năng của Eddie để loại bỏ hoặc Toggle stylesheet bật hoặc tắt. Nó cũng sẽ trả về trạng thái hiện tại của biểu định kiểu. Điều này rất hữu ích, ví dụ, nếu bạn muốn có một nút bật tắt trên trang web của bạn cho người dùng khiếm thị và cần lưu tùy chọn của họ trong cookie.

function toggleStylesheet(href, onoff){ 
    var existingNode=0 //get existing stylesheet node if it already exists: 
    for(var i = 0; i < document.styleSheets.length; i++){ 
     if(document.styleSheets[i].href && document.styleSheets[i].href.indexOf(href)>-1) existingNode = document.styleSheets[i].ownerNode 
    } 
    if(onoff == undefined) onoff = !existingNode //toggle on or off if undefined 
    if(onoff){ //TURN ON: 
     if(existingNode) return onoff //already exists so cancel now 
     var link = document.createElement('link'); 
     link.rel = 'stylesheet'; 
     link.type = 'text/css'; 
     link.href = href; 
     document.getElementsByTagName('head')[0].appendChild(link); 
    }else{ //TURN OFF: 
     if(existingNode) existingNode.parentNode.removeChild(existingNode) 
    } 
    return onoff 
} 

sử dụng mẫu:

toggleStylesheet('myStyle.css') //toggle myStyle.css on or off 

toggleStylesheet('myStyle.css',1) //add myStyle.css 

toggleStylesheet('myStyle.css',0) //remove myStyle.css