文章/答案/技术大牛

发布

问querySelector“：之前”
EN

Stack Overflow用户

提问于 2019-08-31 14:57:16

回答 4查看 470关注 0票数 2

我正在尝试创建我自己的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>

javascript

css

回答 4

Stack Overflow用户

发布于 2019-08-31 15:18:15

编辑:既然你希望它是程序化的，你可以通过css创建一个指向你的伪选择器的style标记，并以程序化的方式改变styletag中的内容。例如，如下所示：

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);

票数 0

Stack Overflow用户

发布于 2019-08-31 16:56:18

这可以通过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>

票数 0

Stack Overflow用户

发布于 2019-08-31 16:56:34

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

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();
    });

所有的问题都很容易用这种方法解决。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57735888

复制

相似问题

问querySelector“：之前”
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问querySelector“：之前”EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问querySelector“：之前”
EN