javascript - 如何在按钮中包含图像或文本？

Question

你好，我正在尝试将文本或图像放入按钮中，谁能帮我做这件事，这就是我所做的

<div id ="bss"><input class="but" type="button" /><center>Mohammad ghazi istanbouly</center></div>


<style type="text/css">
            .but{
              width:100px;
              height:35px;
              box-shadow: 5px 5px 10px #777;
              position: absolute;
              top:20px;
              left:22px;
              background-color: #000;
              background: rgba(0,0,0,0.86) ;
              border-radius: 15px;
              color: yellow ;
            }


   </style>


<script type="text/javascript">

           var bss_node = document.getElementById("bss");
           bss_node.style.color = "#000"  ;
           bss_node.style.fontSize ="50px"     ;
           bss_node.style.border = "1px solid #000" ;
           bss_node.style.boxShadow ="10px 5px 10px #777"     ;
           bss_node.style.borderRadius ="15px"

           var but_node = document.getElementById("but") ;
           but_node.innerText="Log in"

     </script>

所以请任何人纠正我并告诉我如何在按钮内输入文本以及图像感谢您的帮助(Y)

Answer 1

首先，<center>标签已弃用，所以不要使用它；其次，更重要的是，您可以(字面上)将图像放入 <button> 中:

<button><img src="path/to/image.png" /></button>

要包含文本，则(如上所述)，<button>元素可以包含(非交互式)HTML 元素，例如:

<button><p>Whatever text you'd like to enclose</p></button>

当然，如果您需要此图像作为 <button> 的背景图像，那么 CSS 也将允许您实现它:

button {
    background-image: url(path/to/image.png);
}

引用资料:

• > <button> .
• > <center> .