【问题标题】:Java script changing color of element by IDJavascript通过ID改变元素的颜色
【发布时间】:2012-01-02 15:04:10
【问题描述】:

您好,我正在尝试对正在处理的表单进行验证,并且我已经编写了一个函数并使用了

document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF';

我已经测试了我的函数来显示一个警报消息框,以便在选中“trav_emer_med_insur”时显示消息框进行调试。我在这里和无数其他网站上检查过,他们都说getElementById.style.backgroundColor = 'color'; 是实现我正在寻找的方法。我现在不明白为什么它不起作用,一切似乎都是正确的。

这是我的功能的起始相关部分:

function validatePlanTypes(form)    {
    var error = "";

        if (form.trav_emer_med_insur.checked)   {
            document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
            if (!form.trav_emer_med_insur_opt1.checked || !form.trav_emer_med_insur_opt2.checked || !form.trav_emer_med_insur_opt3.checked || !form.trav_emer_med_insur_opt4.checked)   {
                form.trav_emer_med_insur_opt1.style.backgroundColor = 'Yellow';
                form.trav_emer_med_insur_opt2.style.backgroundColor = 'Yellow';
                form.trav_emer_med_insur_opt3.style.backgroundColor = 'Yellow';
                form.trav_emer_med_insur_opt4.style.backgroundColor = 'Yellow';
                error = "You must pick a plan-type for Travel Emergency Medical insurance, areas with a problem have been highlighted yellow for you.";
            }

我还没有测试完整的功能,我现在只是尝试测试第一个 if 语句,正如我所说的 if 语句有效并且 alert("bleh");如果我选中该框,将显示警报

这是我试图更改复选框周围 span 元素的背景颜色的表单的 HTML。

<p><span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" value="span_trav_emer_med_insur" style=""><input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if"  value="trav_emer_med_insur_if" class="form_elements" onClick="if(this.checked){document.getElementById('trav_emer_med_options').style.display='block';}else{document.getElementById('trav_emer_med_options').style.display='none';}"/></span> <!-- Travel Emergency Medical If Box -->

                    <label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if">&nbsp;&nbsp;Travel Emergency Medical Insurance&nbsp;<em>(expands when checked)</em>.</label></p>
                    <p>

                    <div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden">

我也试过

form.span_trav_emer_med_insur.style.backgroundColor = '#FFFFFF';

也无济于事,我真的被难住了,代码看起来和我在网上看到的一样。有人请告诉我我错过了什么。

谢谢, -肖恩

编辑 - 只是为了验证:

if (form.trav_emer_med_insur.checked)   {
            alert("bleh");

而不是

if (form.trav_emer_med_insur.checked)   {
            document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';

确实有效,所以 if 语句或函数没有问题。

完整的文件在这里 - getelementbyID 不工作 - http://hotfile.com/dl/135598683/93484d4/general2.html

在此处使用 alert('bleh') 工作的完整文件 - http://hotfile.com/dl/135598746/dc9e14b/general23.html

工作 PHP 代码准确显示了我正在尝试做的事情(减去页面重新加载部分):

    // Check if Emergency Medical is selected.
if (isset($_POST['trav_emer_med_insur']))   { 

    // If Emergency Medical is selected, then check to see if an option has been selected
    if (isset($_POST['trav_emer_med_insur_opt1']) or isset($_POST['trav_emer_med_insur_opt2']) or isset($_POST['trav_emer_med_insur_opt3']) or isset($_POST['trav_emer_med_insur_opt4']))   {

    $SQLString = $SQLString . "emer_med, emer_med_opt1, emer_med_opt2, emer_med_opt3, emer_med_opt4";

    }

    // If no option is selected display error message   
    else    {

        ++$ErrCount;
        $Errors[$ErrCount] = "You selected interest in Travel Emergency Medical Insurance  but did  not select a plan-type for it";

    }
}

// Check if All-Inclusive Insurance is selected.
elseif (isset($_POST['allinc_insur']))  {

    //If All-Inclusive Insurance is selected, then check to see if an option has been selected
    if (isset($_POST['allinc_insur_opt1']) or isset($_POST['allinc_insur_opt2']))   {

    }   

    //If no option is selected display error message
    else    {

        ++$ErrCount;
        $Errors[$ErrCount] = "You have selected interest in All-Inclusive Insurance but did not select a plan-type for it";

    }
}

// Check if Cancellation Insurance is selected.
elseif (isset($_POST['cancel_insur']))  {



}

// Check if Visitor Insurance is selected.
elseif (isset($_POST['visitor_insur'])) {

    //If Visitor Insurance is selected, then check to see if country is selected.
    if (isset($_POST['country_select']))    {

    }   

    // If no country selected display error message
    else    {

        ++$ErrCount;
        $Errors[$ErrCount]  = "You have selected interest in Visitor Insurance but have not selected a country";

    }       
}

//If no insurane types selected display error.
else    {

    ++$ErrCount;
    $Errors[$ErrCount] = "You haven not selected interest in any insurance plan types";

}
while ($Count != $Target)   {
    if (checked($QuestionNames[0]) != 1);
    ++$Count;
}

【问题讨论】:

  • 它在哪些浏览器中不工作?另外,您的表单标签的name 是什么?
  • Chrome 不能用,只是在 FF 和 IE 中测试过,同样的。 Firebug 报告没有语法错误。
  • 至 GregL - 我的表单名为 mhc_form,它通过提交按钮的 onClick"" 传递给我的函数。正如我的帖子中所述,从 if 语句中正确生成了一个警告框,因此该函数和 if 正在工作,但 style.backgroundcolor 没有响应。
  • 你能在测试用例中重现问题吗? jsfiddle.netjsbin.com
  • 您可以在这里查看完整的文件:hotfile.com/dl/135598683/93484d4/general2.html

标签: javascript css background-color html


【解决方案1】:

我正试图做这件事。我在其中添加了额外的括号,它起作用了。

如:

(document.getElementById("advert")).style.backgroundColor = "red";

【讨论】:

    【解决方案2】:

    您的代码是正确的,如果您想使用 javascript 设置背景颜色,您可以访问(并修改) .style.backgroundColor 属性。

    所以我想问题可能是 html(和样式),检查这个小提琴http://jsfiddle.net/hqKwd/4/ 我设置了一个空的跨度的背景颜色,没有任何事情发生,但是 2 秒后我修改了 innerHTML,你可以看到颜色。我要说明的是,作为一个跨度,它没有显示:块,所以如果你不添加那个样式或修改内容,你什么都看不到。

    另一件事可能是该属性被另一段代码覆盖,但显然情况并非如此

    希望对你有帮助。

    【讨论】:

    • 正如您在更新的 OP 中看到的那样,我已经上传了我的 HTML 文件。出于测试目的,这些 HTML 文件都默认将 span 设置为 RED。该样式正在工作并且没有被覆盖。看起来正在发生的事情正在起作用,有效的代码只是选择不做它应该做的事情......这没有任何意义。
    【解决方案3】:

    您是否尝试过从一开始就给跨度一个颜色以确认您可以看到它?

    由于您的代码看起来非常好,您可能只是看不到跨度背景颜色。

    我同意 OP 的观点,即使用 jquery 处理像这样的琐碎事情是浪费带宽。

    根据您的 cmets,我创建了一个测试页面来模拟您的。

    这行得通:

    <span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" style='backgroundcolor:red'>
    some words<input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if"  value="trav_emer_med_insur_if" class="form_elements" onClick="clck(this)"/>
    </span> 
    <label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if">  Travel Emergency Medical Insurance <em>(expands when checked)</em>.</label></p>
    <div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden" style='display:none;'>
    some hidden words
    </div>
    <script type="text/javascript">
    function clck(cbObj) {
    if(cbObj.checked){
        document.getElementById("span_trav_emer_med_insur").style.background = "green";
        document.getElementById('trav_emer_med_options').style.display='block';
    }
    else {
        document.getElementById("span_trav_emer_med_insur").style.background = "red";
        document.getElementById('trav_emer_med_options').style.display='none';
    }
    }
    </script>
    

    【讨论】:

    • @SC1988 我已添加确认修复。
    • 我已将您的页面完全复制到我的编辑器中并将其保存为 test.html - 这确实有效。我将您使用的 document.getElementById 语句完全复制到我的函数中。 (我已经验证是通过使用警报框工作)。什么都没有发生......问题是我需要进行完整的验证。感谢您的回复,如果它只是单个复选框,我必须验证它会很好。不幸的是,它是一组框,必须选中 4 个中的一个,如果选中 3 个,则必须选中每个框的子选项。我可以在 PHP 中验证这一点
    • 完全没问题。但是我不想有不断的页面重新加载....
    • 我已经编辑了我的 OP 以显示我想要做的确认工作的 PHP 代码。除了更改属性颜色以及发出错误消息外。我不明白的是,我已经确认 if(form.trav_emer_med_insur.checked) {} 正在使用 alert("bleh");那么为什么当我在我的计算机上复制我在您的文件中运行并确认可以工作的 getElementById 代码时,当所述代码之前的 if 语句正常工作时,它将无法工作......
    • span 'span_trav_emer_med_insur' 包含的唯一内容是一个复选框,因此设置背景颜色不会有任何区别,因为它们没有。这就是为什么我在 span 中放了一些词,以便背景颜色可见。
    【解决方案4】:

    我认为您尝试的方法可能不是最有效的方法。

    你有两个选择:

    1. 了解如何使用浏览器的控制台,通过从头开始了解事情的工作原理来找出您的样式设置不起作用的原因,或者,

    2. 使用 jQuery,它会让你的生活变得更好。

    选择 1 值得一试,你会学到很多关于 DOM/CSS 结构的样子。要做到这一点,请在您选择的浏览器响应时单击鼠标右键并选择“检查元素”,然后在 cmd 行上按字面意思输入“document.getElementById("span_trav_emer_med_insur").style.backgroundColor”,看看你得到了什么。这可能很有见地。

    如果您想快速完成工作,请获取 jQuery 并尝试以下操作:

    首先在您的页面上包含 jQuery 包括这一行(还有其他 jQuery 来源):

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    

    代替您使用的代码:

      document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF';
    

    使用以下内容:

    $("#span_trav_emer_med_insur").css("background", "#FFFFFF");
    

    看看这两种方法有何不同?您正在尝试的是了解浏览器 DOM 模型的低级结构,而 jQuery 正在为您提供一个您可以理解的抽象,即“请为我将 CSS 样式的“背景”更改为“黄色”。

    我同意其他人的贡献,这对你来说确实是最好的做法。非常值得学习 jQuery。

    更多关于 jQuery CDN 网站的信息在这里 jQuery CDN jQuery css call

    【讨论】:

    • 在 jquery 中添加,您的代码和 $("span_trav_emer_med_insur").css("background-color", "#000000");也不行……
    • 如果我的回复显得居高临下,我深表歉意...首先,我注意到我提供给您的代码中有一个错误。您正在执行 getElementByID,因此将代码中的字符串从“span_trav_emer_med_insur”更改为“#span_trav_emer_med_insur” - '#' 字符表示您正在选择一个 ID
    • 对不起,也许我只是感到沮丧并误读了您的帖子。我会试试的。
    • 还是什么都没有。我真的不明白。我什至缩小了,为了测试目的,函数很简单:code function validatePlanTypes(form) { var error = "";如果(form.trav_emer_med_insur.checked){警报(“做某事”); } else { } }code 同样,我可以生成一个警告框,但没有样式属性 - 任何类型的,都可以。我什至尝试过使用 style.display="none";,也使用了 jQuery 和常规 Jscript。依然没有。我不明白....
    • 让我们在命令行上试试 jQuery(我建议右键单击“检查元素”作为打开控制台窗口的一种方式。这在 Chrome 或 Safari 以及最新版本的 Firefox 中非常有效)。如果您可以获得命令行操作,请尝试以下操作: $("#span_trav_emer_med_insur") 这应该返回一个 javascript 数组 [div...],假设您的元素是一个 div。确保您的 id 字符串完全正确,这一点非常重要。如果你走到这一步,请告诉我们返回结果是什么。
    【解决方案5】:

    这里有几个建议:

    1. 使用 JS 框架 - JQuery 是流行的选择
    2. 使用 Firebug 进行调试
    3. 在 Firebug 中设置断点以找出什么(如果有的话)正在中断

    【讨论】:

    • 感谢您的建议,但使用框架对我的需求来说太复杂了,我只需要一些简单的 if 语句来改变元素的背景颜色(如果适用)或元素周围的跨度尚未填写。正如我所说,我通过发出警报('bleh')进行了调试;代替我的颜色变化声明。当我选中该框并点击提交时,警报出现了——这意味着 if 正在工作。我在此链接上从该站点 stackoverflow.com/questions/3161154/… 复制的代码对我不起作用,但对那个人有用??
    猜你喜欢
    • 2012-03-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-23
    • 2013-06-30
    • 2014-06-07
    相关资源
    最近更新 更多