我想改变链接的颜色随机当我点击它.有什么方法可以不使用按钮吗?

Question

<div class="heading">                  
<div id="link"><a>My Name</a></div>
<div class="pro">My Career</div>
</div>

我试图寻找一个答案，但我只是得到如何只改变背景或一个按钮。

Answer 1

1. 查找link元素
2. 添加一个点击监听器
3. 点击链接元素，生成一个随机的颜色并更新元素的color style attribute。

这是演示-

// find the link element
let linkEl = document.querySelector('#link a');
// attach a click listener to it
linkEl.addEventListener('click', () => {
// Generate a random color
let color = '#' + Math.floor(Math.random() * 16777215).toString(16);
// set color to the link element
linkEl.style.color = color;
})

a {
cursor: pointer;
}

<div class="heading">                  
<div id="link">
<a>My Name (click me to change my color)</a>
</div>
<div class="pro">My Career</div>
</div>

Answer 2

可能是

<script>
function changeLinkColor() {
// Generate a random color in the format '#RRGGBB'
let randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
// Get the link element
let link = document.querySelector("#link a");
// Set the link color to the random color
link.style.color = randomColor;
}
</script>

Answer 3

你可以在任何情况下尝试:

function generateColor(){
return Math.floor(Math.random() * 255);
}
document.querySelectorAll('.anchor').forEach(el => {
el.onclick = function(e){e.target.style.backgroundColor = 'rgb('+ generateColor() + ',' + generateColor() + ','+ generateColor() + ')';
}
});

.anchor{
display: inline-block;
background:dodgerblue;
text-decoration: none;
color:#fff;
border-radius: 10px;
text-shadow: 0 0 2px #000;
padding: 10px;
margin:10px
}

<a class="anchor anchor1" href="#">click 1</a>
<div class="anchor anchor2" href="#">click 1</div>
<p class="anchor anchor3" href="#">click 1</p>

请检查这个解决方案，让我知道它是否在任何方面对你有帮助。