// 选中 ID 为 myDiv 的元素 var myDiv = document.querySelector('#myDiv'); // 设置 myDiv 的样式 myDiv.style.color = 'red'; myDiv.style.width = '100px'; myDiv.style.height = '100px';
在上述代码中,大家通过 #myDiv 选中了一个元素,并使用了 .style 属性来设置它的一些样式。
除了使用 .style 来设置样式之外,CSSOM 还提供了一些其他的 API 来操作页面上的元素。
// 选中 class 为 myClass 的所有元素 var myClassElements = document.querySelectorAll('.myClass'); // 循环遍历这些元素,并为它们设置样式 for (var i = 0; i< myClassElements.length; i++) { myClassElements[i].style.color = 'green'; }
在上述代码中,大家使用了 document.querySelectorAll() 方法来选中了一组 class 为 myClass 的元素,并通过循环遍历为它们设置了样式。
通过使用 CSSOM 的 API,大家可以轻易地操作页面上的元素,使得大家的页面更美观、更有交互性。