使用排他思想,实现六个div,当鼠标点击某个div时,该div获得背景颜色失去边框,其他div失去背景颜色获得边框 请用JavaScript写出完整代码
时间: 2023-03-14 09:15:28 浏览: 82
使用JavaScript可以通过以下代码实现:let divs = document.querySelectorAll('div'); for (let div of divs) {
div.addEventListener('click', function(e) {
divs.forEach(d => {
if (d === e.target) {
d.style.backgroundColor = '#000';
d.style.border = 'none';
} else {
d.style.backgroundColor = 'none';
d.style.border = '1px solid #000';
}
});
});
}
相关问题
使用排他思想,实现六个div,当鼠标点击某个div时,该div获得背景颜色失去边框,其他div失去背景颜色获得边框,请写出代码
可以使用以下代码:HTML:<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>CSS:.div1 {
background-color : #000;
border : 1px solid #000;
}
.div2 {
background-color : #000;
border : 1px solid #000;
}
.div3 {
background-color : #000;
border : 1px solid #000;
}
.div4 {
background-color : #000;
border : 1px solid #000;
}
.div5 {
background-color : #000;
border : 1px solid #000;
}
.div6 {
background-color : #000;
border : 1px solid #000;
}Javascript:$('.div1').click(function(){
$(this).css({
'background-color': 'transparent',
'border': 'none'
});
$('.div2, .div3, .div4, .div5, .div6').css({
'background-color': '#000',
'border': '1px solid #000'
});
});$('.div2').click(function(){
$(this).css({
'background-color': 'transparent',
'border': 'none'
});
$('.div1, .div3, .div4, .div5, .div6').css({
'background-color': '#000',
'border': '1px solid #000'
});
});$('.div3').click(function(){
$(this).css({
'background-color': 'transparent',
'border': 'none'
});
$('.div1, .div2, .div4, .div5, .div6').css({
'background-color': '#000',
'border': '1px solid #000'
});
});$('.div4').click(function(){
$(this).css({
'background-color': 'transparent',
'border': 'none'
});
$('.div1, .div2, .div3, .div5, .div6').css({
'background-color': '#000',
'border': '1px solid #000'
});
});$('.div5').click(function(){
$(this).css({
'background-color': 'transparent',
'border': 'none'
});
$('.div1, .div2, .div3, .div4, .div6').css({
'background-color': '#000',
'border': '1px solid #000'
});
});$('.div6').click(function(){
$(this).css({
'background-color': 'transparent',
'border': 'none'
});
$('.div1, .div2, .div3, .div4, .div5').css({
'background-color': '#000',
'border': '1px solid #000'
});
});
1-留言板 完成一个留言板,需要有基本的样式,通过一个input输入框获取输入留言,一个按钮提交留言,每完成一个提交,页面上就多一个新的元素存放新的留言 2-链式调用 现在需要获取一个id为parent的父元素的孙子元素,他们的层级关系为 父元素的第一个子元素的最后一个子元素的第一个节点 请写出如何使用链式调用实现 3-使用排他思想,实现六个div,当鼠标点击某个div时,该div获得背景颜色失去边框,其他div失去背景颜色获得边框 请用JavaScript写出完整代码
答:1-留言板:可以使用HTML和JavaScript来完成。首先,在HTML中创建一个input输入框,添加一个按钮,当按钮被点击时,通过JavaScript来获取input输入框中的内容,并使用JavaScript创建一个新的元素,将新元素添加到页面中,以显示新留言。 2-链式调用:可以使用document.querySelector()方法来实现。可以使用以下代码:document.querySelector('#parent').firstElementChild.lastElementChild.firstElementChild 3-使用排他思想,实现六个div:可以使用JavaScript来实现。可以使用以下代码:// 获取所有div元素let divs = document.querySelectorAll('div');// 为每个div添加点击事件divs.forEach(div => {div.addEventListener('click', function() {// 去除其他div的背景颜色和边框divs.forEach(d => {d.style.backgroundColor = '';d.style.border = '';});// 为当前div添加背景颜色和边框this.style.backgroundColor = '#000';this.style.border = '1px solid #000';});});