Question

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

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语句工作并且警告（“bleh”）;如果我选中该框

，将显示警告

以下是表单的HTML，我正在尝试更改复选框周围的span元素的背景颜色。

<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';

同样无济于事，我真的很难过，代码看起来与我在网上看到的相同。有人请告诉我我错过了什么。

谢谢， -Sean

编辑 - 只是为了验证：

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

这里有完整的文件警报（'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;
}

Answer 1

你是否尝试过从一开始就给一个颜色以确认你能看到它？

由于您的代码看起来完全没问题，可能就是您无法看到跨度背景颜色。

对于它的价值我同意OP同意使用jquery这样的事情是浪费带宽。

根据您的评论，我创建了一个测试页面来模拟您的评论。

这有效：

<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>

Answer 2

我试图做这件事。我把额外的括号放进去了。

如：

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

Answer 3

以下是一些建议：

使用JS框架 - JQuery是受欢迎的选择
使用Firebug进行调试
在Firebug中设置断点以确定哪些（如果有的话）正在破坏

Answer 4

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

这里有两个选项：

了解如何使用浏览器的控制台，通过了解事情的实际工作方式，找出风格设置不起作用的原因，或者
使用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样式”背景“更改为”黄色“。< / p>

我同意其他人的贡献，这对你来说真的是最好的行动方案。学习jQuery非常值得。

有关jQuery CDN网站的更多信息jQuery CDN jQuery css call

Answer 5

您的代码是正确的，如果您想要使用javascript设置背景颜色，您可以访问（和修改）.style.backgroundColor属性。

所以我想问题可能是html（和样式），请检查这个小提琴http://jsfiddle.net/hqKwd/4/我设置了一个空的spanCack的backgroundColor，没有任何事情发生，但是2秒后我修改了innerHTML而你可以看到颜色。我试图展示的是，作为一个跨度，它没有display：block，所以如果你不添加那个样式或修改内容，你就看不到任何东西。

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

希望它有所帮助。

Javascript按ID改变元素的颜色

5 个答案: