jer*_*erz 1 html javascript css function
我试图弄清楚如何在点击我的功能时携带按钮的ID.1鼠标悬停时改变颜色的功能和鼠标输出时将其改回原始颜色的功能.我知道我可以在css中完成它,但我只是想学习如何在javascript中完成它.提前致谢.以下是我的代码.
var buttonClass = this.className();
// document.getElementById("mainTitle");
this.style.backgroundColor="#000000";
this.style.color="#ffffff";
this.style.cursor = "pointer";
}
function defaultColor() {
var buttonClasss = this.getElementById();
//document.getElementById("addList");
this.style.backgroundColor = "#ffffff";
this.style.color = "#000000";
this.style.cursor = "pointer";
}
//event listener for Change Title button
document.getElementById("mainTitle").addEventListener("mouseover", changeColor);
document.getElementById("mainTitle").addEventListener("mouseout", defaultColor);
document.getElementById("mainTitle").addEventListener("click", changeTitle);
//event listener for change title ends here
//event listener for add listing
document.getElementById("addList").addEventListener("mouseover", changeColor);
document.getElementById("addList").addEventListener("mouseout", defaultColor);
document.getElementById("addList").addEventListener("click", addListing);
//event listener for add listing ends hereRun Code Online (Sandbox Code Playgroud)
#mainTitle {
border:1px solid #ff33f4;
float:left;
clear:both;
font-family:arial;
font-weight:bold;
font-size:20px;
border-radius:50px;
background-color:#ff33ff;
width:200px;
height:35px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
cursor:pointer;
}
#addList {
border:1px solid #ff33f4;
float:right;
font-family:arial;
font-weight:bold;
font-size:20px;
border-radius:50px;
background-color:#ff33ff;
width:200px;
height:35px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
cursor:pointer;
}
#main {
clear:both;
margin-top:120px;
}Run Code Online (Sandbox Code Playgroud)
<div id="mainTitle" class="changeTitle">Change Title</div>
<div id="addList" class="addList">Add List</div>Run Code Online (Sandbox Code Playgroud)
每个注册的活动都会附带参数Event.
function defaultColor(e) {
// ^ argument (Event)
var currentClickedButton = e.currentTarget; // to get the current clicked button
/* Your code here */
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
89 次 |
| 最近记录: |