Styles
● 更改背景颜色
message.style.backgroundColor = '#37383d';
● 也可以更改宽度
message.style.width = '120%';
● 这种赋予style的方式是内联式的,所以我们通过这种方式去读取非内联式的CSS元素式读取不到的,但是在内联式里面的style可以读取到
console.log(message.style.color);
console.log(message.style.backgroundColor);
● 我们可以使用getComputedStyle来获取样式信息
console.log(getComputedStyle(message).color);
console.log(getComputedStyle(message).height);
● 我们也可以使用上面的方法将高度增加
message.style.height =
Number.parseFloat(getComputedStyle(message).height, 10) + 30 + 'px';
console.log(getComputedStyle(message).height);
● 我们也可以动态设置文档根元素( 元素)的 CSS 变量的值
document.documentElement.style.setProperty('--color-primary', 'orangered');
属性
● 我们可以通过JS读取到HTML文档中的各个属性
const logo = document.querySelector('.nav__logo');
console.log(logo.alt);
console.log(logo.src);
console.log(logo.className);
● 但是这个只能读取到标准属性,例如我们在HTML中再添加一个属性
<img
src="img/logo.png"
alt="Bankist logo"
class="nav__logo"
id="logo"
desc="ItShare"
/>
console.log(logo.desc);
● 我们可以使用getAttribute()方法去读取到
console.log(logo.getAttribute('desc'));
● 我们也可以对属性进行修改
logo.alt = '一个好看的图片';
● 当然我们也可以创建属性
logo.setAttribute('来源', '随便搜索');
类
logo.classList.add();
logo.classList.remove();
logo.classList.toggle();
logo.classList.contains();
//logo.classList.add() 方法用于向元素的类列表中添加一个或多个类名。你可以传递一个或多个类名作为参数,多个类名之间用逗号分隔。
//logo.classList.remove() 方法用于从元素的类列表中移除一个或多个类名,与 add() 方法类似,你可以传递一个或多个类名作为参数。
//logo.classList.toggle() 方法用于在元素的类列表中切换一个类名的存在。如果类名存在,则移除它;如果类名不存在,则添加它。这个方法也可以接受一个可选的第二个参数,表示是否强制添加或移除类名。
//logo.classList.contains() 方法用于检查元素的类列表中是否包含指定的类名。如果包含,则返回 true,否则返回 false。
● 下面的尽量不要使用
logo.className = 'Itshare';
//这样会覆盖你之前创建的所有类