js如何改变html元素的值

JavaScript018

js如何改变html元素的值,第1张

js改变html的元素的值，首先需要理解的就是Js的选取对象的方法，一般都是通过class或者是id直接去来获取，然后在确定好，你要改变的值，如宽度，高度，背景等等这些属性，也可以通过改变来实现动画的效果，具体看下代码：

<html>

<head>

<style>

#round{

width:300px

height:200px

}

</style>

</head>

<script>

var oDiv = document.getElementById('round')

oDiv.style.width = 400px //通过js改变这个div的宽度

</script>

<body>

<div id='round'>

<p>我是测试文字</p>

</div>

</body>

</html>

<pre>

<code class="language-bash">

xxxx

</code>

</pre>

<script>

window.onload=function(){

   var codes=document.getElementsByTagName("code")

   for(var i in codes){

      if(codes[i].className&&codes[i].className.indexOf("language-bash")>-1){

         codes[i].parentNode.className="command-line language-bash"

         codes[i].parentNode.dataset.user="root"

         codes[i].parentNode.dataset.host="localhost"

      }

   }

}

</script>

<!DOCTYPE html>

<html>

<head>

<title>替换内容</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<iframe src="test.html" id="myframe"></iframe>

<a href="#" onclick="replaceContent()">点击替换内容</a>

<script type="text/javascript">

content = '我把你的这部分理解成读取一段内容'

function replaceContent(){

document.getElementById('myframe').contentWindow.document.body.innerText = content

}

</script>

</body>