2017-05-31 27 views
0

これは私のボタンで、...彼はかなり良い取り組んでいるが、彼は醜いです:削除挿入バー

function MyFunc() { 
 
    var MyDiv = document.createElement("div"); 
 
    document.getElementById("MyBody").appendChild(MyDiv); 
 
    var MyButton = document.createElement("input"); 
 
    MyButton.id = "Mybuttonid"; 
 
    MyButton.className = "Mybuttonclass"; 
 
    MyButton.setAttribute("value", "open"); 
 
    MyDiv.appendChild(MyButton); 
 
}
#Mybuttonid { 
 
    padding: 2pt; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    border-style: none; 
 
    border-bottom-left-radius: 10pt; 
 
    border-bottom-right-radius: 10pt; 
 
    background-color: rgba(59, 59, 59, 1); 
 
    color: rgba(255, 255, 255, 1); 
 
    font-family: Arial, sans-serif; 
 
    font-size: 15pt; 
 
    cursor: pointer; 
 
    outline-style: none; 
 
}
<html> 
 

 
<head> 
 
</head> 
 

 
<body id="MyBody"> 
 
    <script> 
 
    MyFunc(); 
 
    </script> 
 
</body> 
 

 
</html>

そして、私はこの挿入バーを削除したいです私はボタンをクリックしたときにそれがまま

私は画像を入れてみます

....あなたはまた、属性を追加する必要がありますThe Image...

答えて

0

type="button"

function MyFunc() { 
 
    var MyDiv = document.createElement("div"); 
 
    document.getElementById("MyBody").appendChild(MyDiv); 
 
    var MyButton = document.createElement("input"); 
 
    MyButton.id = "Mybuttonid"; 
 
    MyButton.className = "Mybuttonclass"; 
 
    MyButton.setAttribute("value", "open"); 
 
    MyButton.setAttribute("type", "button");// added line 
 
    MyDiv.appendChild(MyButton); 
 
} 
 

 
MyFunc();
#Mybuttonid { 
 
    padding: 2pt; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    border-style: none; 
 
    border-bottom-left-radius: 10pt; 
 
    border-bottom-right-radius: 10pt; 
 
    background-color: rgba(59, 59, 59, 1); 
 
    color: rgba(255, 255, 255, 1); 
 
    font-family: Arial, sans-serif; 
 
    font-size: 15pt; 
 
    cursor: pointer; 
 
    outline-style: none; 
 
}
<body id="MyBody"> 
 
</body>