元素自身属性-1
前面学习了HTML元素通用的属性和方法
不同类型的HTML元素对应的 DOM 对象类型不同, 属性也会有差异。
这里我们学习一些常用HTML元素对象 自身 的属性方法
注意:下面介绍的元素属性,如果没有特别标记为 只读
, 就是 既可读、也可写
a
a
对应的DOM对象类型是 HTMLAnchorElement
常用属性有: hash host hostname href origin port protocol search
下面是一个示例
<a href='https://www.byhy.net:80/py/lang/basic/09?name=byhy&pagenum=23#pop'
target='_blank'>
测试连接
</a>
<br><br>
脚本运行结果如下
<pre style='font-size:1rem'></pre>
<script>
let a = document.querySelector('a')
let pre = document.querySelector('pre')
pre.innerText = `
a.hash = ${a.hash}
a.host = ${a.host}
a.hostname = ${a.hostname}
a.href = ${a.href}
a.origin = ${a.origin }
a.port = ${a.port}
a.protocol = ${a.protocol}
a.search = ${a.search}
`
</script>
其中 search 属性获取的是url参数,每个参数由键值对组成。
如果要获取其中某个参数的值,可以这样
button
button
对应的DOM对象类型是 HTMLButtonElement
常用属性有:
- disabled
是个bool值,表示该按钮是否被禁用,禁用为true,可用为false
下面是一个示例
<button id='b0'> 被测按钮 </button>
<button id='b1'> 禁用/启动 </button>
<script>
let b0 = document.querySelector('#b0')
let b1 = document.querySelector('#b1')
b0.addEventListener('click', ()=> alert(`可以被点击哦`))
b1.addEventListener('click', ()=>{
b0.disabled = !b0.disabled
alert(`原来被测按钮 disable属性值为 ${b0.disabled},改为 ${!b0.disabled}`)
}
)
</script>
img
img
对应的DOM对象类型是 HTMLImageElement
常用属性有:
- alt
对应 img 元素的 alt属性, 当图片显示失败时(比如url错误),在图片位置显示的文本内容
- height
对应 img 元素的 高度,数字为单位,表示像素
- width
对应 img 元素的 宽度,数字为单位,表示像素
- src
对应 img 元素的 的url地址
下面是一个示例
<img src="https://www.byhy.net/cdn2/imgs/gh/logo01.png"
alt="白月黑羽logo">
<br><br>
<button id='b1'> 查看属性 </button>
<button id='b2'> 修改属性 </button>
<button id='b3'> 重置 </button>
<script>
let img = document.querySelector('img')
let [b1,b2,b3] = document.querySelectorAll('button')
function getImgProps(){
return `
alt = ${img.alt}
height = ${img.height}
width = ${img.width}
src = ${img.src}
`
}
b1.addEventListener('click', ()=> alert('图片属性为:' + getImgProps()))
b2.addEventListener('click', ()=>{
img.src = 'https://www.byhy.net/cdn2/imgs/api/tut_20200415160730_83.png'
img.alt = '修改后'
img.height = 27
img.width = 182
}
)
b3.addEventListener('click', ()=> location.reload())
</script>