查询选择器“：之前” [重复]

Question

我正在尝试创建自己的Radio Button。我创建了一个Switch 原型，但我无法选择this div.radio_button 的:before。如何将:before 查询到变量中？

HTMLDivElement.prototype.Switch = function() {
  if ((this.getAttribute("class") == "radio_button")) {
    var s = this.querySelector("::before"); // s being null
    console.log(s);
  }
};
HTMLDivElement.prototype.selected = false;

document.querySelector("div.radio_button").Switch();

div.radio_button {
  height: 30px;
  width: 50px;
  background-color: rgb(190, 190, 190);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  position: relative;
  margin: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

div.radio_button:before {
  content: '';
  height: 30px;
  width: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(255, 255, 255);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

<div class="radio_button"></div>

Answer 1

编辑： 由于您希望它以编程方式进行，因此您可以创建一个样式标签，通过 css 定位您的伪选择器，并以编程方式更改该样式标签中的内容。比如这样：

HTMLDivElement.prototype.Switch = function() {
  if ((this.getAttribute("class") == "radio_button")) {
    addRadioButtonStyle();
  }
};
HTMLDivElement.prototype.selected = false;

document.querySelector("div.radio_button").Switch();

function addRadioButtonStyle() {
    var css = '.radio_button:before {top: 0 }',
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');

    head.appendChild(style);

    style.type = 'text/css';
    style.id = 'radio_button_style';
    if (style.styleSheet){
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
}

function changeRadioButtonTopStyle(val) {
    var styleTag = document.getElementById('radio_button_style');
    var newStyle = '.radio_button:before { top: '+val+'px !important }';
    styleTag.innerText = newStyle;
}

changeRadioButtonTopStyle(50);

Answer 2

感谢您的提问！ 让我们用另一种方式来实现效果。

div.radio-button {
    height: 30px;
    width: 50px;
    background-color: rgb(190, 190, 190);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    position: relative;
    margin: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    cursor: pointer;
}
div.radio-button::before{
    content: '';
    height: 30px;
    width: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    background-color: rgb(255, 255, 255);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
div.radio-button.radio-sleep:before {
    left: 0;
}

div.radio-button.radio-active:before {
    left: 20px;
    background-color: rgb(255, 68, 75);
}

<div class="radio-button radio-sleep"></div>

    HTMLDivElement.prototype.switch = function() {
        let classList = this.classList;
        if (classList.contains("radio-button")) {
            if(classList.contains("radio-active")){
                classList.remove("radio-active");
                classList.add("radio-sleep");
            }else{
                classList.add("radio-active");
                classList.remove("radio-sleep");
            }
            this.selected = !this.selected;
        }
    };
    HTMLDivElement.prototype.selected = false;

    let divButton= document.querySelector("div.radio-button");

    divButton.addEventListener("click",e=>{
        divButton.switch();
    });

所有问题都可以通过这种方式轻松解决。

Answer 3

可以通过 window.getComputedProperty() 方法来完成。就像在这个例子中一样：

<!DOCTYPE html>

<meta charset="utf-8">
<title>Test</title>

<style>
  h1:before {
    content: "AAA";
    color: red;
  }
</style>

<h1>BBB</h1>

<script>
  let elm = document.querySelector('h1')
  let pseudoElm = getComputedStyle(elm, ':before')

  console.log(pseudoElm.title)
  console.log(pseudoElm.color)
</script>

Answer 4

您可以通过这种方式使用css variables (caniuse?) 编辑伪元素样式：

$('div').css({"--bTop": "50px"});

div {
    position: relative;
}
div::before {
    content: '---';
    position: absolute;
    top: var(--bTop);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Element</div>

同样在JSFiddle

动画也没有问题：

$('div').css({"--bTop": "30px"});
$({foo:30}).animate({foo:100}, {
    step: function(val) {
        $('div').css({"--bTop": val+"px"});
    },
	duration: 3000
});

div {
  position: relative;
  --bTop: 0;
}

div::before {
  content: '---';
  position: absolute;
  top: var(--bTop);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Element</div>