JavaScript的点击事件变换文本内容

2025-10-05 11:25:32

1、【第一步】打开Dreamweaver cc  2014软件,选择建立html界面,里面自动生成一些必要代码的代码格式,不需再浪费时间去写。

JavaScript的点击事件变换文本内容

JavaScript的点击事件变换文本内容

JavaScript的点击事件变换文本内容

2、【第二步】在body内输入“<div id="one">转变前</div>”,one是可变的,随自己喜好,可以是其他字母单词都可以。

JavaScript的点击事件变换文本内容

3、【第三步】body标签前或则head标签内键入:

<style>

  #one{font-size:24px;}

</style>,

调整一下字体大小(font-size:24px),保存好,回到Dreamweaver界面内摁F12,弹出页面观察页面上的文字:转变前。

JavaScript的点击事件变换文本内容

JavaScript的点击事件变换文本内容

4、【第四步】在Dreamweaver界面内相对靠前输入:

<script>

window.onload=function(){

var btn=document.getElementById('one')

btn.onclick=function(){

btn.innerHTML="转变后"

}

}

</script>

JavaScript的点击事件变换文本内容

5、【第五步】保存,同样方法摁F12,弹出页面,鼠标点击问文字,出现转变。

JavaScript的点击事件变换文本内容

JavaScript的点击事件变换文本内容

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢