Add Css Using Javascript - Harley NTek

Trang chủ » Chèn Js Vào Css » Add Css Using Javascript - Harley NTek

Có thể bạn quan tâm

Thay đổi css(cascading style sheets)  trong một trang html bằng js(javascript). Thông thường có 3 cách để nhúng css vào một trang html. Đó là:

  • External style sheet
  • Internal style sheet
  • Inline style

Việc thay đổi css dùng js sẽ thực hiện trên cả 3 cách cài đặt này. Bài viết này sẽ tiến hành đối chiếu song song cả hai phương pháp(cài đặt truyền thống và dùng js).

Ta sử dụng cấu trúc trang html đơn giản nhất làm ví dụ xuyên suốt:

<html >

<head></head>

<body><p id=”sample” >This is a paragraph.</p></body>

</html>

Mục tiêu là khi load trang lên sẽ được kết quả như hình dưới đây:

css_result

1.INLINE STYLE

Truyền thống:

<p id=”sample”  style=” background-color:red;”>This is a paragraph.</p>

Dùng JS:

<script>

var y=”background-color:red;”;

var x=document.getElementById(“sample”);

x.setAttribute(“style”,y);

</script>

Hoặc

<script>

document.getElementById(“sample”).style.backgroundColor=’red’;

</script>

Chú ý: đoạn script này đặt dưới thẻ <p id=”sample”> để khi trình duyệt chạy từ trên xuống chỗ đoạn script mới biết được “sample” là Id của thẻ nào.

Một số thông tin thêm:

  • về đối tượng Document
  • Và phương thức getElementById()
  • Đối tượng Element
  • và phương thức setAttribute()
  • style property

2.INTERNAL STYLE SHEET

Truyền thống:

<style>

#sample { background-color:red; }

</style>

Dùng JS:

<script>

var style=document.createElement(“STYLE”);

var x=”#sample{background-color:red;}”;

var text=document.createTextNode(x);

style.appendChild(text);

document.head.appendChild(style);

</script>

Chú ý: đoạn script này thoải mái hơn đoạn trên, đặt ở đâu cũng chạy hết. Giống như ý nghĩa của phương pháp cài đặt tương tự mà nó thay thế.

Một số thông tin thêm:

  • createElement() method
  • createTextNode() method
  • appendChild() method

3. EXTERNAL STYLE SHEET

Truyền thống:

<link href=”2.css” rel=”stylesheet” type=”text/css”/>

Nội dung của 2.css

#sample { background-color:red; }

Dùng JS:

<script>

var style=document.createElement(“LINK”);

style.setAttribute(“href”,”2.css”);

style.setAttribute(“rel”,”stylesheet”);

style.setAttribute(“type”,”text/css”);

document.head.appendChild(style);

</script>

Trên đây chỉ là những cách do mình mày mò, có chỗ nào sai hay có cách nào hay hơn, mong mọi người chỉ giúp.

Share this:

  • X
  • Facebook
Like Loading...

Related

Từ khóa » Chèn Js Vào Css