Question

我的样式标签之间有以下按钮：

<style>
 .myButton {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.myButton:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.myButton:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

</style>

问题：

如何使用ID btnAdd将该按钮添加到我的HTML页面这是正确的做法：

<button class="myButton" id="btnAdd" /> Add </button>

Answer 1

1。）

<a class="myButton" id="btnAdd"> Add </a>

<强> 2）。

然后呢？ （下面的完整代码）

document.addEventListener('DOMContentLoaded', function(){

});

function myFunc(){ alert('Hey Hey Hey, is that a mirror in your pocket?'); }
    
    document.addEventListener('DOMContentLoaded', function(){
        document.getElementById('btnAdd').addEventListener('click', myFunc);
    });

.myButton {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.myButton:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.myButton:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

<a class="myButton" id="btnAdd" href="#"> Add </a>

3。） 根据评论请求，也可以这样做：

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<a class="myButton" id="btnAdd" href="#"> Add </a>

<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>

<p id="demo"></p>

<script>
document.getElementById("btnAdd").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
</script>

JSFIDDLE

4。）并且未在href=""标记中使用<a>

JSFIDDLE (no link in a tag)

Answer 2

正确的格式是：

<button class="myButton" id="btnAdd">Add</button>

您发布的内容是标准代码与self-closing tag之间的混合。如果使用自动关闭标记，则不需要尾随框（在这种情况下为</button>），但button不是支持自关闭标记的元素，因此标准标记框应该是使用

将CSS3按钮添加到HTML页面

2 个答案: