js如何設定css樣式?本篇文章就跟大家介紹js設定(修改)css樣式的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。
下面我們就來跟大家介紹使用javascript是如果設定css樣式的。
1、直接設定樣式(內嵌樣式)
#使用JavaScript設定元素樣式的最簡單方法是使用style屬性。在我們透過JavaScript存取的每個HTML元素時都有一個 style物件。此物件允許我們指定CSS屬性並設定其值。例如,這是設定id 值為demo的HTML元素的字體顏色、背景顏色、的樣式:
var myElement = document.querySelector("#demo"); // 把颜色设置成紫色 elem.style.color = 'purple'; // 将背景颜色设置为浅灰色 elem.style.backgroundColor = '#e5e5e5'; // 将高度设置为150 px elem.style.height = '150px';
註:JavaScript使用駝峰原則(例:backgroundColor)而不是短劃線(background-color)表示屬性名稱
該style屬性在元素上添加樣式內聯:
<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;"> Hello, world! </div>
但是,這可能會使我們的標記變得非常混亂。瀏覽器渲染的效能也較差。
2、加入全域樣式
另一種方法是將c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927裡帶有CSS屬性的元素注入DOM。將在設定應用於一組元素而不僅僅是一個元素的樣式時,這非常有用。
首先,我們將建立一個樣式元素。
var style = document.createElement('style');
接下來,我們將透過innerHTML來為c9ccee2e6ea535a969eb3f532ad9fe89添加我們的樣式。
var style = document.createElement('style'); style.innerHTML = '.some-element {' + 'color: purple;' + 'background-color: #e5e5e5;' + 'height: 150px;' + '}';
最後,我們將把樣式註入DOM。為此,我們將取得script我們在DOM中找到的第一個標記,並用它insertBefore()來加入我們的style標記。
// 创建我们的样式表 var style = document.createElement('style'); style.innerHTML = '.some-element {' + 'color: purple;' + 'background-color: #e5e5e5;' + 'height: 150px;' + '}'; // 获取第一个脚本标记 var ref = document.querySelector('script'); // 在第一个脚本标签之前插入新样式 ref.parentNode.insertBefore(style, ref);
3、使用JavaScript新增和刪除類別:add()和remove()
這種方法涉及新增和刪除類別值,這反過來又會改變應用的樣式規則。例如,假設我們有一個樣式規則,如下所示:
.disableMenu { display: none; }
在HTML中,您有一個id為 dropDown的選單:
<ul id="dropDown"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
現在,如果我們想將.disableMenu 樣式規則應用於此元素中,我們需要做的就是將disableMenu作為類別值新增至dropDown元素:
<ul class="disableMenu" id="dropDown"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul>
要使用JavaScript完成相同的結果,我們將使用classList API。此API使得從HTML元素新增或刪除類別值變得非常簡單。
要將disableMenu類別名稱加入我們的dropDown元素,請在HTML元素的classList屬性上使用add()方法:
var theDropDown = document.querySelector("#dropDown"); theDropDown.classList.add("disableMenu");
要刪除disableMenu類別名,我們可以呼叫classList API的remove()方法:
var theDropDown = document.querySelector("#dropDown"); theDropDown.classList.remove("disableMenu");
總結:以上就是本篇文章的全部內容,大家可以更加狀況,選擇不同的方法修改css樣式。希望對大家的學習有所幫助,更多相關影片教學推薦:JavaScript教學!
以上是js如何設定css樣式? js修改css樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!