JS 获取html标签属性和设置标签样式

最新推荐文章于 2024-05-12 10:57:12 发布

yangkecsdn

最新推荐文章于 2024-05-12 10:57:12 发布

阅读量1.2k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/yangke_2008_good/article/details/105951381

版权

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.font16 {font-size:16px;}
</style>
</head>

<body>

<h1>我是标题1 h1</h1>
<button onclick="h1()">获取h1标签内容</button>
<h2 id="h2">我是标题2 h2</h2>
<button onclick="h2()">获取h2标签内容</button>
<h3 class="h3">我是标题3 h3</h3>
<button onclick="h3()">获取h3标签内容</button>
<h4 class="h3">我是标题4 h4</h4>
<h5><span>我是标题5</span> h5</h5>
<button onclick="h5()">获取h5标签内容</button>
<h6 class="h6">我是标题6 h6</h6>
<button onclick="h6()">设置h6标签样式</button>

<script type="text/javascript">
function h1(){
  var h1 = document.getElementsByTagName('h1')[0];
  console.log(h1.innerHTML);
}
function h2(){
  var h2 = document.getElementById('h2');
  console.log(h2.innerHTML);
}
function h3(){
  //var h3 = document.getElementsByClassName('h3')[0];
  //console.log(h3.innerHTML);
  var h3 = document.getElementsByClassName('h3');
  for(var i=0;i<h3.length;i++){
    console.log(h3[i].innerHTML);
  }
}
function h5(){
  var h5 = document.getElementsByTagName('h5')[0];
  var h5span = h5.getElementsByTagName('span')[0];
  console.log(h5span.innerHTML);
}
function h6(){
  var h6 = document.getElementsByClassName('h6')[0];
  h6.style.color = 'red';
  h6.className = 'h6 font16';
}

//可见区域高度
var js_height = document.documentElement.clientHeight;
var jquery_height = $(window).height();
console.log(js_height+','+jquery_height);
</script>

</body>
</html>

yangkecsdn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS 获取html标签属性和设置标签样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta...
复制链接

扫一扫