通过 JS 选择伪元素 :focus 和 :active

Question

对于我想通过 JS 函数更改的样式表单文本框，我似乎无法让伪元素选择解决方法在 :focus 上工作。

我知道添加一个类很重要，我已经看到了 :after 和 :before 的示例，但没有看到 :focus，并且不确定在哪里添加类

JS：

$(document).ready(function() {
                function night() {
              var currentTime = new Date().getHours();
              if (0 <= currentTime&&currentTime < 5) {
                $('.text_box').css('text-shadow', '0 0 0 #272727');
                $('.text_box:focus').css('background-color', '0 0 0 #FFF');
            }
              if (10 <= currentTime&&currentTime <= 24) {
                $('.text_box').css('text-shadow', '0 0 0 #FFF');
                $('.text_box:focus').css('background-color', '0 0 0 #272727');
            }
            }

        night();            
        });

CCS：

.text_box {
    width:350px;
    height: 80px;
    color: transparent;
    text-shadow: 0 0 0 #fff;
    text-align:left;
    font-size: 4.2em;
    padding-top: 25px;
    padding-left: 15px;
    padding-bottom: 10px;
    outline:none;
    background-color:transparent;
    cursor: text;
    float:inherit;
    display:inline block;
    position:relative;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    letter-spacing: 1px;
    -webkit-transition:.5s ease;
    -moz-transition:.5s ease;
    -o-transition:.5s ease;
    -ms-transition:.5s ease;
    transition:.5s ease }
.text_box:focus {
    background-color: #FFF;
    color: transparent;
    text-shadow: 0 0 0 #272727;
    -webkit-transition:.5s ease;
    -moz-transition:.5s ease;
    -o-transition:.5s ease;
    -ms-transition:.5s ease;
    transition:.5s ease;
    -moz-box-shadow: 0 0 1em #FFF;
    -webkit-box-shadow: 0 0 1em #FFF;
    -webkit-animation-name:boxPulse; }

Answer 1

当您的代码决定应该这样做时，只需从 JavaScript 添加一个 CSS 类

document.getElementById('day').addEventListener('click', function() {
  addClasses('day', 'night');
});

document.getElementById('night').addEventListener('click', function() {
  addClasses('night', 'day');
})

function addClasses(add, remove) {
  var buttons = document.getElementsByTagName('input');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.add(add);
    buttons[i].classList.remove(remove);
  }
  buttons[0].focus();
}

$(document).ready(function() {
  var currentTime = new Date().getHours();
  if (currentTime > 20 || (0 <= currentTime && currentTime < 5)) {
    addClasses('night', 'day');
  } else {
    addClasses('day', 'night');  
  }
});

.day:focus {
  background-color: #ddd;
  color: red;
}
.night:focus {
  background-color: black;
  color: yellow;
}
:focus {
  text-shadow: 0 0 0 #272727;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  -o-transition: .5s ease;
  -ms-transition: .5s ease;
  transition: .5s ease;
  -moz-box-shadow: 0 0 1em #FFF;
  -webkit-box-shadow: 0 0 1em #FFF;
  -webkit-animation-name: boxPulse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="name" value="Some Name" />
<br>
<input type="text" placeholder="last name" value="Last Name" />


<button id='day'>Make day</button>
<button id='night'>Make night</button>

Answer 2

虽然它确实有很酷的效果，但不需要 jquery，但也不需要任何类。试试这个：

:focus {
    background-color:green;
}

<input type="text" placeholder="name" /><br>
<input type="text" placeholder="last name" />

或两者之间的某种组合。

Answer 3

我实际上找到了一个很好的解决方案。我在这里阅读了一些关于选择伪元素:after 和:before 的教程，但从未见过适用于:focus 和:active 的东西。

我的问题：我想根据一天中的时间为页面上的某些元素设置不同的 CSS，但又不切换整个样式表。 （这是一个简单的网站，我觉得很草率）。我使用：$('.text_box').css('text-shadow', '0 0 0 #272727'); 来调整 CSS 元素，但在尝试调整样式伪元素时遇到了障碍。

为了说明问题，我使用了addRule 方法，它允许我在我整理的时间敏感的 CSS JS 脚本中调整 CSS。

(function($) {
            window.addRule = function(selector, styles, sheet) {
                if (typeof styles !== "string") {
                    var clone = "";
                    for (var style in styles) {
                        var val = styles[style];
                        style = style.replace(/([A-Z])/g, "-$1").toLowerCase(); 
                        clone += style + ":" + (style === "content" ? '"' + val + '"' : val) + "; ";
                    }
                    styles = clone;
                }
                sheet = sheet || document.styleSheets[0];
                if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules
                    .length);
                else if (sheet.addRule) sheet.addRule(selector, styles);
                return this;
            };
            if ($) {
                $.fn.addRule = function(styles, sheet) {
                    addRule(this.selector, styles, sheet);
                    return this;
                };
            }
        }(window.jQuery));
        $(document).ready(function() {
            function night() {
                var currentTime = new Date().getHours();
                if (0 <= currentTime && currentTime < 5) {
                    $('.text_box').css('text-shadow', '0 0 0 #272727');
                    $(".text_box:focus").addRule("background-color: #272727");
                    $(".text_box:focus").addRule("color: #FFF");
                    $(".text_box:focus").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".text_box:focus").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                    $("#mc-embedded-subscribe").addRule("color: #272727;");
                    $(".submit_box:hover").addRule("background-color:#272727 !important;");
                    $(".submit_box:hover").addRule("color:#FFF !important;");
                    $(".submit_box:hover").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".submit_box:hover").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                }
                if (20 <= currentTime && currentTime <= 24) {
                    $('.text_box').css('text-shadow', '0 0 0 #272727');
                    $(".text_box:focus").addRule("background-color: #272727");
                    $(".text_box:focus").addRule("color: #FFF");
                    $(".text_box:focus").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".text_box:focus").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                    $("#mc-embedded-subscribe").addRule("color: #272727;");
                    $(".submit_box:hover").addRule("background-color:#272727 !important;");
                    $(".submit_box:hover").addRule("color:#FFF !important;");
                    $(".submit_box:hover").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".submit_box:hover").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                }
            }
            night();
        });

这很好用，但我想知道是否有更简单的解决方法？这比将新类添加到包含 :active 或 :focus 的现有元素中要简单得多 + 更干净——尽管我认为在这种情况下不会正常工作。