0
私はcodepenで見つけたプロジェクト模倣しようとしている：私は、リスト項目を作成し、それらを削除することができます。この時点で http://codepen.io/ChynoDeluxe/pen/pJxOQE/変化する画像の中にボタンを作り
を、私は削除ボタンをオンにします覆われたときに不透明度が増加する画像に変換します。しかし、私は作成されたボタンを画像にする方法を理解することはできません。理想的には、同じゴミ箱のアイコンにする方法を見つけ出すだろうが、私はそこから行くことができる画像を表示することを望んでいる。
背景画像を作ってみましたが、正しく表示されませんでした。ここで私がこれまで持っているものです。
<!DOCTPYE html>
<html>
<head>
<title>MSL List</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript"></script>
<style>
div li input {
margin-right: 10px;
}
#wrapper {
width: 300px;
margin-left: auto;
margin-right: auto;
font: 1em Helvetica, Arial, Sans-serif;
}
#error {
display: none;
background: rgba(237, 28, 36, .7);
color:#fff;
padding: 14px;
margin-bottom: 10px;
border-radius: 10px;
text-align: center;
font-size: 1.1em;
}
#inpt {
background: rgba(31, 41, 51, .9);
color: #fff;
padding: 14px;
text-align: center;
font-size: .9em;
width: 227px;
border: none;
}
#btn {
background: #0066cc;
color: #fff;
font-size: 1.75em;
border: none;
padding: 6px;
width: 45px;
}
input, button {
vertical-align: top;
}
input, button:focus {
outline:none;
}
#iList {
list-style-type: none;
background-color: #fff;
margin: 0 auto;
}
li {
border-top: #E6E6E6 solid 1px;
padding: 12px;
}
.removeBtn {
float: right;
padding: 4px;
margin-top: 2px;
background-image:url("recycle.png");
opacity:.6;
}
</style>
</head>
<body bgcolor="#E6E6E6">
<div id="wrapper">
<div id="error">Please enter an item!</div>
<div id="form-head">
<input type="text" id="inpt" placeholder="What are you looking for?" /><button id="btn">+</button>
</div>
<div id="iList">
</div>
</div>
<script>
function updateItemStatus() { //making the function that updates whether an item should have a line through it or not
var cbId = this.id.replace("cb_", ""); //used to replace "cb_" with "" to remove the _cb part of the string on the focus
var itemText = document.getElementById("item_" + cbId); //gets element (item_minSecMsec)
if (this.checked) { //if an item is checked, bugged
itemText.style.opacity = .25;
itemText.style.textDecoration = "line-through";
} else {
itemText.style.opacity = 1;
itemText.style.textDecoration = "none";
}
};
function deleteItem() {var dbId = this.id.replace("btn_", "");
var delBtn = document.getElementById("li_" + dbId);
delBtn.onclick=function() {
this.parentNode.removeChild(delBtn);
return false;
};
}
function addNewItem(iList, itemText) { //defining a function that acts upon list and itemText to label it with a time stamp
var date = new Date(); //sets date ia variable that sets date to make the time stamp
var id = date.getMilliseconds(); //makes id = milliseconds
var listItem = document.createElement("li"); //creates a list element node
listItem.id = "li_" + id; //gives that node an id of li_minSecMsec
var checkBox = document.createElement("input"); //creates an input node
checkBox.type = "checkbox"; //gives that input node a type of checkbox
checkBox.id = "cb_" + id; //makes the checkbox id cb_minSecMsec
checkBox.onclick = updateItemStatus; //when the checkbox is clicked it runs updateItemStatus function defined above
var span = document.createElement("span"); //creates a span node.
span.id = "item_" + id; //makes span id = item_minSecMsec
span.innerHTML = itemText; //makes the inner text of the span node itemText (which has no further value in this function)
var delBtn = document.createElement("button");
delBtn.setAttribute("class", "removeBtn");
delBtn.id = "btn_" + id;
delBtn.onclick = deleteItem;
listItem.appendChild(checkBox); //append checkbox node to the li node created
listItem.appendChild(span); //append the span node to the li node as well
listItem.appendChild(delBtn);
iList.appendChild(listItem); //add the li node to list parameter (presumably any list in the DOM?)
document.getElementById("inpt").value="";
}
var inItemText = document.getElementById("inpt"); //gets the input text
inItemText.focus(); //makes it the focus
document.getElementById("inpt") //makes enter button run it as if btn was clicked
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("btn").click();
}
});
var btnNew = document.getElementById("btn"); //gets button
btnNew.onclick = function() { //on click the button runs a function that runs the addNewItem function
if (document.getElementById("inpt").value.length < 1) {
document.getElementById("error").style.display="block";
} else {
document.getElementById("error").style.display="none";
var inItemText = document.getElementById("inpt"); //defines inItemText within the function as the input text
var itemText = inItemText.value; //makes new variable of itemText to get the value of what is in the input
addNewItem(document.getElementById("iList"), itemText); //this is where the li node is added to the ul and itemText is set as the text in the input
}
};
</script>
</body>
</html>
Here's how it shows up where the pic should be the buttons on the right.
ボタン要素にはいくつかのデフォルトのスタイルがあります。 –
なぜ単純に不透明度の代わりにテキストの色を変更しないのですか？また、ホバーでボタンの不透明度を変更することを止めるものはありません。 – warkentien2