<分区>
标签 javascript html css
<分区>
我正在尝试通过单击更改我网站的 css 属性，更具体地说是目前的导航栏，然后希望稍后扩展。 目前我有这个。
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 1 <b class="caret"></b></a>
<ul class="dropdown-menu" id="dropdown-menu1">
<li id="greenBg"><a href="#" onclick="changeNavbarColor()">Makes the navbar green </a></li>
<li id="orangeBg"><a href="#" onclick="changeNavbarColor()">Makes the navbar orange </a></li>
<li id="blueBg"><a href="#" onclick="changeNavbarColor()">Makes the navbar blue </a></li>
</ul>
</li>
function changeNavbarColor(){
var navbarCol = document.getElementById("container-fluid1");
var greenBg = document.getElementById("greenBg");
var orangeBg = document.getElementById("orangeBg");
var blueBg = document.getElementById("blueBg");
var dropdown = document.getElementById("dropdown-menu1");
var blue = #06F;
var green = #060;
var orange = #F60;
if(dropdown.id == "greenBg"){
greenBg.style.backgroundColor = green;
}else if(dropdown.id == "blueBg"){
blueBg.style.backgroundColor = blue;
}else if(dropdown.id == "orangeBg"){
orangeBg.style.backgroundColor = orange;
};
}
希望每次单击其中一个链接时它都会更改为该颜色。到目前为止什么都没发生。可能与访问我有 dropdown.id 的元素有关
谢谢
最佳答案
您没有选择正确的元素，我们可以通过在 onlick 处理程序中注入(inject) this 来解决这个问题。
您需要传入对象单击宽度的上下文 event.target 以便我们可以获取父元素然后检查它的 id，因为单击的对象将是一个 anchor 元素 so so 得到我们做的id event.target.parentNode.id
HTML:
<li id="greenBg"><a href="#" onclick="changeNavbarColor(this)">Makes the navbar green </a></li>
我们需要传入 this 作为上下文，这样我们才能获取目标
JS:
if(event.target.parentNode.id == "greenBg"){
greenBg.style.backgroundColor = green;
}
这里我们最后检查被点击元素的正确id并改变背景。
您还必须将颜色设置为像这样的字符串 var blue = "#06F"; 否则您会在查找变量时出错。
您可以查看工作示例 here
关于javascript - 单击更改 css 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32778966/
相关文章：
html - 如何使用 CSS 在顶部和底部制作一个打开的盒子作为容器？
javascript - 使用 ngSanitize 允许某些样式属性
jquery - Slick Carousel : Adapt . slick-track to scaled image height in center 模式
javascript - 更改 React-Bootstrap Form.Control 元素的颜色
javascript - NPM在nodejs中获取中止错误
javascript - 如何从 SXSSFWorkbook 创建 PIVOT 表 - APACHE POI
javascript - 使用 Jasmine 测试 Angular2/TypeScript 管道