通過 JS 選擇偽元素 :focus 和 :active

Question

我似乎無法使用偽 slement 選擇解決方法來處理我想通過 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的現有元素添加新類要簡單得多，但我認為在這種情況下這不會正常工作。