如何设计元素的显示与隐藏,并改变按钮文字样式

发布时间:2020-05-07 14:59:21 作者:Leah
来源:亿速云 阅读:479

如何设计元素的显示与隐藏,并改变按钮文字样式?这篇文章运用了实例代码展示,代码非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script>
<body>
window.onload=function()
{
var oBtn=document.getElementById("btn1");
var txt_1=document.getElementById("txt1");
var txt_2=document.getElementById("txt2");
oBtn.onclick=function()
{
if(txt_2.style.display=="block")
{
   txt_1.style.display="block";
   txt_2.style.display="none";
   oBtn.innerHTML = "更新须知"
}
else
{
   txt_1.style.display="none";
   txt_2.style.display="block";
   oBtn.innerHTML = "返回"
}
} }
</script>
<div class="col-md-12 column">
         <div id="txt1" class="jumbotron">
     <h2>
        Welcome
     </h2>
</div>
<div id="txt2" class=" alert alert-dismissable alert-info">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
       <h5>
          注意!
       </h5>
<p>
       <input type="button" id="btn1" value="按钮"/>
</p>
</body>
</html>

展示效果:

如何设计元素的显示与隐藏,并改变按钮文字样式

如何设计元素的显示与隐藏,并改变按钮文字样式

以上就是如何设计元素的显示与隐藏,并改变按钮文字样式的具体操作,代码应该是足够清楚的,而且我也相信有相当的一些例子可能是我们日常工作可能会见得到的。通过这篇文章,希望你能收获更多。

推荐阅读:
  1. 改变css伪元素样式的方法
  2. jQuery中点击按钮如何实现显示与隐藏的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:php怎样去除数组的键名

下一篇:花式了解 PHP 7.3 更新

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》