尝试更改颜色/字体时文本闪烁答案

【问题标题】：Text blinking when trying to change color / font尝试更改颜色/字体时文本闪烁
【发布时间】：2014-01-22 11:44:58
【问题描述】：

我是网页设计新手，在 HTML 上使用 JavaScript 时遇到了一些问题。你看我有这个代码：

<!DOCTYPE html>
<html>
<head>
    <script src="Cod_JS.js"> </script>
    <link href='Cod_Css.css' type=text/css rel=stylesheet>
</head>
<body>
    <div>
        <p id="un" class="uno">Esta es una prueba</p>
    </div>
    <br>
    <form>
        Color: <input type="text" name="color"> <br>
        Fuente: <input type="text" name="fuente"><br>
        <input type="submit" value="Enviar" onclick="funcion1(color,fuente)" >
    </form>
</body>
</html>

这是我的 JS 代码：

function funcion1(x,y)
{
var a=x.value;
var b=y.value;
if (a=="Rojo" && b=="Arial" )
{
var prueba=document.getElementById("un").className="dos";
}
else if (a=="Rojo" && b=="Calibri") 
{
var prueba=document.getElementById("un").className="tres";
}
else if (a=="Verde" && b=="Arial") 
{
var prueba=document.getElementById("un").className="cuatro";
}
else if (a=="Verde" && b=="Calibri") 
{
var prueba=document.getElementById("un").className="cinco";
}
}

基本上它的作用是我在输入字段上写下颜色和字体，当我单击提交时，JS 将更改 <p> 的类，然后我的 CSS 将识别它并用新的颜色/字体重新绘制它。但是它不会改变它超过 1 秒。它闪烁并恢复正常。我知道这不是最好的方法，但自从我第一次使用 JS 以来，我正在尽我所能哈哈。

有人知道为什么会这样吗？

提前致谢！

【问题讨论】：

标签： javascript html css

【解决方案1】：

您在提交输入的 onclick 中调用您的 javascript。提交的名称“提交”表单，然后重新加载页面。

你可以替换

<input type="submit" value="Enviar" onclick="funcion1(color,fuente)" >

通过

<button onclick="funcion1(color,fuente)">Enviar</button>

【讨论】：

哦，我明白了，我不知道：O！谢谢。我使用了按钮，但它仍然重新加载了我的页面 =/
改用input type="button"。

【解决方案2】：

更新：

假设您需要在不使用任何服务器端技术的情况下提交表单并保留用户选择。

以下解决方案应允许您选择颜色、提交表单并将颜色和字体设置为提交表单之前选择的内容。

<!DOCTYPE html>
<html>
<head>
    <script src="Cod_JS.js"> </script>
    <link href='Cod_Css.css' type=text/css rel=stylesheet>
</head>
<body>
  <form> 
    <div>
        <p id="un" class="uno">Esta es una prueba</p>
    </div>
    <br>
        Color: <input type="text" name="color"> <br>
        Fuente: <input type="text" name="fuente"><br>
        <input type="button" value="Enviar" onclick="funcion1(color,fuente)" >
</form>
<script>
    // get query arguments
    var $_GET = {}, args = location.search.substr(1).split(/&/);
    for (var i=0; i<args.length; ++i) {
         var tmp = args[i].split(/=/);
         if (tmp[0] != "") {
            $_GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp.slice(1).join("").replace("+", " "));
        }
    }

    function updateColor()
    {
       var color = $_GET['color'];
       var font  = $_GET['fuente'];

       if (color == "Rojo" && font  == "Arial" )
       {
            document.getElementById("un").className="dos";
       }
       else if (color == "Rojo" && font == "Calibri") {
            document.getElementById("un").className="tres";
       }
       else if (color == "Verde" && font == "Arial")  {
            document.getElementById("un").className="cuatro";
       }
       else if (color == "Verde" && font == "Calibri") 
       {
            document.getElementById("un").className="cinco";
       }
    }

    if($_GET && $_GET['color']){
          updateColor();
    }
</script>
</body>
</html>

请注意：当您单击表单提交按钮时，您将表单提交到“操作”中定义的目的地或自身（如果没有定义）。

如果你想改变元素的颜色并停留在页面上，你不应该提交表单。如果您提交表单，您需要阅读提交的数据。

如果您使用服务器端语言，请使用它来读取值并将它们再次放置在页面中。如果您不使用服务器端语言，那么我编写的解决方案可能会有所帮助。

$_GET 函数借用自：Getting value GET OR POST variable using JavaScript?

【讨论】：

您好，感谢您的回答。是的，我知道我必须使用用户指定的颜色和字体。这就是我使用的 from。
所以你需要先提交表单并设置好用户在提交表单之前选择的颜色？
用户设置颜色和字体，然后当他提交表单时，它必须更改段落的（
Esta es una prueba
）颜色和字体。
提交表单时，您将离开当前页面。如果您没有在表单操作中定义目标，它将提交给页面本身（使用默认方法 GET）。您将丢失已完成的客户端设置。您需要阅读发布的值并重新分配给元素，或者留在页面上而不提交。你到底想达到什么目标？
就是这样，这就像我必须开始熟悉这些语言的作业。另一位用户给了我需要的答案。使用按钮而不是提交表单。顺便说一句，感谢您花时间了解表单和提交按钮的工作原理^^。