元素自身属性-1

前面学习了HTML元素通用的属性和方法

不同类型的HTML元素对应的 DOM 对象类型不同, 属性也会有差异。

这里我们学习一些常用HTML元素对象 自身 的属性方法

注意:下面介绍的元素属性,如果没有特别标记为 只读 , 就是 既可读、也可写

a

a 对应的DOM对象类型是 HTMLAnchorElement

常用属性有: hash host hostname href origin port protocol search

下面是一个示例


<a href='https://www.byhy.net:80/tut/py/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参数,每个参数由键值对组成。

如果要获取其中某个参数的值,可以这样

let params = new URLSearchParams(a.search);
let pagenum = parseInt(params.get("pagenum")); 

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://cdn2.byhy.net/imgs/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://cdn2.byhy.net/imgs/api/tut_20200415160730_83.png'     
      img.alt = '修改后'
      img.height = 27
      img.width  = 182
    }
  )
  
  b3.addEventListener('click', ()=> location.reload())
</script>