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

Just add a CSS class from JavaScript when your code decides it should do so

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，但也不需要类。试试这个：

＆＃13;

:focus {
    background-color:green;
}

＆＃13;

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

＆＃13;

或两者之间的某种组合。

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的现有元素添加新类更简单+更清晰 - 尽管我不认为在这种情况下它会正常工作。

选择伪元素：焦点和：通过JS激活

3 个答案: