无法获取我的id's使用javascript从html中获取样式

cant grab my id's from html with javascript to give them styles

本文关键字：获取 javascript 使用 样式 html 我的 id      更新时间：2023-09-26

我正在做调色板，它需要有一个预定义的调色板，然后从中选择颜色，问题是它必须是可变的，为此我提供了这个解决方案

            <div class='colorScope'>
                <div id="colorBackgroundDark<%=project.id%>">
                    <div id="Dark1<%=project.id%>">
                    </div>
                    <div id="Dark2<%=project.id%>">
                    </div>
                </div>
                <div id="colorBackgroundLight<%=project.id%>">
                    <div id="Light1<%=project.id%>">
                    </div>
                    <div id="Light2<%=project.id%>">
                    </div>
                </div>
            </div>

项目Id由rails给出，当创建一个带有调色板的项目时（这是想法的html）

这是应该制作可变调色板的Js，但由于某种原因而不起作用，我无法弄清楚，我真的希望你们能帮助我，请再次考虑到我是一个新手，请善待我：x

function colorPalettes(id){
    var myElement = document.getElementById('colorBackgroundDark'+id);
    myElement.style.backgroundColor = "#D93600";
    myElement.style.width = "50%";
    myElement.style.height = "256px";
    var myElement3 = document.getElementById('Dark1'+id);
    myElement3.style.backgroundColor = "#D93600";
    myElement3.style.width = "50%";
    myElement3.style.height = "256px";
    var myElement4 = document.getElementById('Dark2'+id);
    myElement4.style.backgroundColor = "#D93600";
    myElement4.style.width = "50%";
    myElement4.style.height = "256px";
    var myElement2 = document.getElementById('colorBackgroundLight'+id);
    myElement2.style.backgroundColor = "#ffffff";
    myElement2.style.width = "50%";
    myElement2.style.height = "256px";
    var myElement5 = document.getElementById('Light1'+id);
    myElement5.style.backgroundColor = "#00474E";
    myElement5.style.width = "50%";
    myElement5.style.height = "256px";

    var myElement6 = document.getElementById('Light2'+id);
    myElement6.style.backgroundColor = "#6CEEFC";
    myElement5.style.width = "50%";
    myElement5.style.height = "256px";
}

$( document ).ready(function() {
    var id = $('[type="range"]').attr('id')
    colorPalettes(id);
});

我同意j-dexx的css注释，但如果您要使用javascript，假设元素具有正确的id，我会将您的文档更改为：

$('[type="range"]').each(function() {
    colorPalettes(this.id);
});

还要检查这个$('[type="range"]')是否返回任何内容，因为你的问题中的html不包括任何输入

但正如我所说的-你的要求是它需要有一个预定义的调色板-这非常适合使用一个类来应用预定义的托盘

下面是你的代码工作-我已经更改了一些高度和颜色，这样你就不会得到重叠的div或相同颜色的div相互隐藏

function colorPalettes(id) {
  var myElement = document.getElementById('colorBackgroundDark' + id);
  myElement.style.backgroundColor = "#D93600";
  myElement.style.width = "100%";
  myElement.style.height = "532px";
  var myElement3 = document.getElementById('Dark1' + id);
  myElement3.style.backgroundColor = "#ff0000";
  myElement3.style.width = "50%";
  myElement3.style.height = "256px";
  var myElement4 = document.getElementById('Dark2' + id);
  myElement4.style.backgroundColor = "#ee3333";
  myElement4.style.width = "50%";
  myElement4.style.height = "256px";
  var myElement2 = document.getElementById('colorBackgroundLight' + id);
  myElement2.style.backgroundColor = "#ffffff";
  myElement2.style.width = "100%";
  myElement2.style.height = "532px";
  var myElement5 = document.getElementById('Light1' + id);
  myElement5.style.backgroundColor = "#00474E";
  myElement5.style.width = "50%";
  myElement5.style.height = "256px";
  var myElement6 = document.getElementById('Light2' + id);
  myElement6.style.backgroundColor = "#6CEEFC";
  myElement6.style.width = "50%";
  myElement6.style.height = "256px";
}
$(document).ready(function() {
  $('[type="range"]').each(function() {
    colorPalettes(this.id);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorScope">
  <div id="colorBackgroundDarktest1">
    <div id="Dark1test1"></div>
    <div id="Dark2test1"></div>
  </div>
  <div id="colorBackgroundLighttest1">
    <div id="Light1test1"></div>
    <div id="Light2test1"></div>
  </div>
</div>
<input id="test1" type="range" min="0" max="20" step="5">

伙计们，这解决了我的问题，非常感谢您的帮助。如果有人有类似的问题，您可以使用它。

$( document ).ready(function() {
    $('[type="range"]').each(function(){
        colorPalettes(this.id);
    })
相关文章：