1.dom元素.内置属性:如果没有赋值就是取值
2.操作样式
style:样式属性对象。它是一个对象,包含着当前元素所有可设置的样式属性,使用时通过 dom元素.style.样式 = 值。它的作用是设置行内样式
className:设置元素的类名,它会覆盖元素之前的类名样式
classList:当前元素的类样式列表
(1).add(class1, class2, ...):添加新样式,不会修改元素之前的类样式
如:add('car','pic')记得加引号
(2).remove(class1, class2, ...):移除样式
(3).toggle(class):切换样式
(4).contains:判断元素是否包含某个样式,包含返回true,不包含返回false
body>
<button>添加一个字体大小样式</button>
<button class="second">移除一个字体大小样式</button>
<button>切换一个字体大小样式</button>
<button>判断元素是否有某个样式</button>
<p class="red">我是百变p元素</p>
<script>
// 获取元素
let p = document.querySelector('p')
//四种选取方式
let btn1 = document.querySelector('button')
let btn2 = document.querySelector('.second')
let btn3 = document.querySelector('button:nth-of-type(3)')
let btn4 = document.querySelectorAll('button')[3]
// 单击事件
btn1.addEventListener('click', function () {
//classList.add:在已有的基础上新增一个新的样式类名,‘不影响’元素之前已有的样式
// p.classList.add('新样式类名')
//括号里面的类名不用再加.标记了,因为它只能对类名样式进行处理
p.classList.add('size50', 'underline') //多样式就用逗号单独分隔开
})
btn2.addEventListener('click', function () {
//classList.remove:移除指定名称样式,不影响元素其他的样式类名
p.classList.remove('size50')
})
btn3.addEventListener('click', function () {
//classList.toggle:切换元素的样式,如果没有就添加,如果有就移除
p.classList.toggle('size50')
})
btn4.addEventListener('click', function () {
//classList.contains:判断当前元素是否包含某个指定名称的样式,如果有就返回true,如果没有返回false
let flag = p.classList.contains('size50')
console.log(flag);
})
</script>
</body>
3.设置/修改表单属性 取值: DOM对象.属性名
赋值: DOM对象.属性名 = 新值
如果没有赋值就是取值,它的值是布尔值,特别对于checked属性,选中就是true,否则就是false
常见表单内置属性:value、disabled(是否禁止点击)、checked、selected
注意:textarea文本域要用value获取