javascript - 使用 JavaScript 覆盖样式

我想做的是，每当我在签名表单中单击我的输入字段时，我都希望该表单看起来像这样。

我目前通过在包含整个表单的 div 元素 (#my-sub-container-02) 上使用 ...:hover 来实现上述结果(它在下面给出的代码中被注释掉了)。我想要做的是(连同悬停)，只要我聚焦了任何输入字段(单击并且光标正在等待用户输入)，黑色背景就会出现。

我尝试使用 JavaScript(JS) 解决了这个问题。在 JS 中，我尝试使用这种方法，每当我单击任何输入字段时，它都应该设置我的 div 背景的样式，以显示在我给出的第一个屏幕截图中。请注意，在我写在下面的 JS 文件中，我目前只使用名字的第一个输入字段。我特意给了它一个 ID，让 JS 中的事情变得更容易。到目前为止，我还没有摆弄其他输入字段。

我可以告诉你这么多，onclick 之前的 JS 文件正在运行，也就是说，在单击第一个输入字段时，“转换”函数被成功调用。您可以替换这些 ID 以确保“my-sub-container-01”(这是用于表单左侧的文本)和“my-sub-container-02-submit”(按钮上的文本“提交”在表格下方)。如果在替换中使用了上述任何一个 ID，则在单击第一个输入字段(名字)时，每个 ID 字体颜色的相应元素应变为“红色”。

但是，每当我尝试在注册表单上使用样式时，都没有任何变化。 )JS 文件中的当前 ID 用于注册表单。)

如果我根本不应该使用 JS 来解决这个问题，请您指导我应该使用什么。在再次寻求帮助之前，我会确保自己解决这个问题。

HTML、CSS 和 JS 文件如下。我也使用了一些来自 Bootstrap 的类，但我没有把它放在文件的巨大长度的 b/c 中。 ( http://getbootstrap.com )

提醒:CSS/JS/图像的路径是根据我在我的系统上的方式设置的。

HTML。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sign Up</title>
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
    <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
</head>
<body>
<div class="site-hd container">
    <h1>F U N G&nbsp&nbsp&nbsp&nbsp&nbsp&nbspE N T R Y&nbsp&nbsp&nbsp&nbsp&nbsp&nbspT E S T</h1>
</div>
<div id="my-container-01">
    <div class="container">
        <div class="col-6 col-m-12" id="my-sub-container-01">
            <h2>Are you looking the best way to prepare your Entrance Test Exam?</h2>
            <p id="my-sub-container-text-01">This website is your complete resource to get admission in the top ranked universities of Pakistan. Our team consists of toppers from several universities. We have collected more than 2000 MCQs from Past Papers of NUST, MCAT, GIKI, PIEAS and FAST, over the last three years and are making them available to you through this platform. Join us for practicing past paper MCQs, getting tips from the toppers, learning tricks to solve MCQs and having sincere advice at each stage of your entry test.</p>
        </div>
        <div class="col-6 col-m-12" id="my-sub-container-02">
            <h2 id="my-sub-container-hd-02">Sign Up</h2>
            <form id="my-sub-container-02-signupform" name="SingupForm">
                <div>
                  <input class="my-sub-container-02-input" id="Test" type="Name" name="FName" placeholder="Enter First Name">
                  <input class="my-sub-container-02-input" type="Name" name="LName" placeholder="Enter Last Name";>
                </div>
                <div>
                  <input class="my-sub-container-02-input" type="email" name="Email" placeholder="Enter email">
                </div>
                <div>
                  <input class="my-sub-container-02-input" type="password" name="Password" placeholder="Enter password">
                </div>
                <div>
                  <label class="my-sub-container-02-label"><input type="checkbox"> Remember me</label>
                </div>
                <button id="my-sub-container-02-submit" type="submit">Submit</button>
            </form>
        </div>
    </div>
</div>
<footer>
    <p>Something something</p>
</footer>
<script type="text/javascript" src="js/myjs.js"></script>
</body>
</html>

CSS

* 
{
    box-sizing: border-box;
}

/*The columns inside a row are all floating to the left, and 
are therefore taken out of the flow of the page, and other 
elements will be placed as if the columns do not exist. To 
prevent this, we will add a style that clears the flow:*/

.site-hd
{
    font-family: 'Cinzel', serif;
    text-align: center;
}

#my-container-01
{
    background-image: url("../Images/pexels-photo-176851.jpeg");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#my-sub-container-01
{
    color: white;
    font-weight: 900;
    font-family: 'Cinzel', serif;
    padding-right: 50px;
    text-align: justify;
}

#my-sub-container-text-01
{
    font-size: 20px;
}

#my-sub-container-02
{
    margin-top: 40px;
    transition: ease-in 1s;
}

/*#my-sub-container-02:hover
{
    background-color: rgba(0,0,0,0.7);
    border-radius: 3px;
    box-shadow: 2px 2px black;
}*/

#my-sub-container-hd-02
{
    font-family: 'Cinzel', serif;
    color: white;
    padding: 0px 40px 0px 40px;
    margin-left: 30%;
}

.my-sub-container-02-input
{
    margin: 20px 35px 15px 40px;
    border-radius: 10px;
    padding: 5px;
    background-color: #272822;
    color: white;
}

.my-sub-container-02-input:focus
{
    outline: none !important;
}

.my-sub-container-02-label
{
    margin: 20px 35px 15px 44px;
    color: white;
    font-family: 'Cinzel', serif;
}

#my-sub-container-02-submit
{
    margin-left: 40%;
    padding: 8px 25px 8px 25px;
    border: 2px solid #00689d;
    border-radius: 4px;
    background-color: #8bac39;
    /*background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: white;
}

.row
{
    width: 100%
}

.row::after 
{
    content: "";
    clear: both;
    display: block;
}


[class*="col-"] {
    float: left;
    padding: 15px;
}


[class*="col-"] 
{
    /*mobile*/
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

JavaScript

"Use Strict"
// Declarations on Top
// It is a good coding practice to put all declarations at the top of each script or function.

// This will:

// Give cleaner code
// Provide a single place to look for local variables
// Make it easier to avoid unwanted (implied) global variables
// Reduce the possibility of unwanted re-declarations


function validateForm() 
{


    var a, b, c, d;
    a = document.forms["SingupForm"]["FName"].value;
    b = document.forms["SingupForm"]["LName"].value;
    c = document.forms["SingupForm"]["Email"].value;
    d = document.forms["SingupForm"]["Password"].value;
    if (a == "" || b == "" || c == "" || d == "") 
    {
        if (a == "")
            alert("First Name field must be filled out");
        else if (b == "")
            alert("Last Name field must be filled out");
        else if (c == "")
            alert("Email field must be filled out");
        else if (d == "")
            alert("Password field must be filled out")
        return false;
    }
    else
    {
        alert("Form successfully submitted"); 
        // onclick(document.getElementById("sub-btn").innerHTML = "<a href='http://www.google.com'> Google </a>");
    }
}

function transition()
{
    document.getElementById("my-sub-container-02-signupform").style.color="red";
}

function init()
{
    var SignUpForm;

    SignUpForm = document.getElementById("my-sub-container-02-signupform");
    SignUpForm.onsubmit = validateForm;

    var translation;

    translation = document.getElementById("Test");
    translation.onclick = transition;
}

window.onload = init();

最佳答案

当输入像这样获得焦点时，您可以使用一些简单的 javascript 来更改表单的类:

var form = document.getElementById('form');
var input = document.getElementById('input');

// Simply listen for the focus event on your input and change the class
// You could also directly change styles with form.style.backgroundColor = '#000';
input.addEventListener('focus', function(){
  form.className = 'focused';
});
input.addEventListener('blur', function(){
  form.className = '';
});

form {
  width: 100%;
  display: block;
}
form.focused {
  background-color: black;
}

<form id="form">
  <input type="text" id="input" />
</form>

你也可以通过选择所有的 input 元素来完成它(我的例子假设所有的输入都在你的表单中，否则只使用 css 选择器查询，比如 #myFormId input) 并将其应用于所有:

var form = document.getElementById('form');
var inputs = document.querySelectorAll('input');

for( var i = 0; i < inputs.length; i++ ){
  inputs[i].addEventListener('focus', function(){
    form.className = 'focused';
  });
  inputs[i].addEventListener('blur', function(){
    form.className = '';
  });
}

form {
  width: 100%;
  display: block;
}
form.focused {
  background-color: black;
}

<form id="form">
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</form>

关于javascript - 使用 JavaScript 覆盖样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40936412/

javascript - 使用 JavaScript 覆盖样式

上一篇：html - 使用CSS在子div上应用不同的样式

下一篇：html - 如何使 Bootstrap 缩略图图像具有相同的高度，以便缩略图面板对齐？