参考资料

1. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
2. HTML DOM 返回文档的标题实例
3. HTML DOM 返回image的替代文本
4. HTML DOM 返回一个button的value 实例
5. HTML DOM 返回页面上所有相对URL的基URL 实例
6. HTML DOM 返回一个iframe中的frameborder属性的值
7. HTML DOM指定表格的frame
8. HTML DOM对单个单元格的内容水平对齐

HTML DOM 获取链接type属性值

详细介绍

HTML DOM (文档对象模型) 提供了访问和操作HTML元素的方法。要获取链接(<a>或<link>)元素的type属性值，可以使用DOM的getAttribute()方法或直接访问元素的type属性。

相关标签

• <a> - 超链接标签

• <link> - 资源链接标签

用法

// 方法1: 使用getAttribute()
element.getAttribute("type");

// 方法2: 直接访问type属性
element.type;

实例

<a id="myLink" href="example.pdf" type="application/pdf">下载PDF</a>

<script>
  const link = document.getElementById("myLink");
  
  // 获取type属性值
  const type1 = link.getAttribute("type");
  const type2 = link.type;
  
  console.log(type1); // 输出: "application/pdf"
  console.log(type2); // 输出: "application/pdf"
</script>

功能

• 获取链接元素指定的MIME类型

• 可用于根据链接类型执行不同操作

• 常用于文件下载链接或资源链接的类型判断

CSS扩展

虽然type属性主要用于JavaScript操作，但也可以通过CSS属性选择器进行样式设置：

/* 为PDF链接添加特殊样式 */
a[type="application/pdf"] {
  color: red;
  background-image: url('pdf-icon.png');
  padding-left: 20px;
  background-repeat: no-repeat;
}

/* 为所有有type属性的链接添加样式 */
a[type] {
  font-weight: bold;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。