发表新帖
发表新帖

how to select :after element using jquery

前端 未结
关注
4 1148
名媛妹妹
名媛妹妹 2020-12-16 15:25

Bellow is my codes.what i have tried.when this popup appear i want to use this close button to close entire popbox.

CSS code

.bigdiv{
    display:non
相关标签:
4条回答
  • 轻奢々
    2020-12-16 16:01

    Unfortunately, you can't select pseudo-elements in jQuery (or JavaScript in general).

    jQuery's appendTo() method works exactly like CSS :after though, so it might work as a replacement (albeit not so elegant as pure CSS solution).

    e.g instead of:

    .bigdiv:after {
    cursor:pointer;
    content:url('http://static.doers.lk/img/closebox.png');
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

    Try it like this

    CSS:

    .bigdivAfter {
    cursor:pointer;
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

    JS:

    $("<div class=bigdivAfter><img src='http://static.doers.lk/img/closebox.png'></div>").appendTo(".bigdiv");

    And then you can select the closebox image as normal.

    0 讨论(0)
  • 清歌不尽
    2020-12-16 16:02

    You can use the getComputedStyle function, which is supported by most major browsers - IE9,IE10,Chrome,FF. I have not found a way to do this in IE8 though.

    var attrContent = getComputedStyle(this,':after').content;
var attrWidth = getComputedStyle(this,':after').width;

    If you find this function is undefined try window.getComputedStyle instead.

    0 讨论(0)
  • 南方客
    2020-12-16 16:03

    I want to select :after elements .how to do that using jquery ?

    You can't, generated pseudo-elements don't exist in the DOM (yet, sadly).

    We can prove this like so:

    CSS:

    #foo:before {
  content: '[Before]'
}
#foo:after {
  content: '[After]'
}

    HTML:

    <body><div id="foo">Foo</div></body>

    JavaScript:

    (function() {

  var msgs = [];
  var child;
  var div;

  for (child = document.body.firstChild;
       child;
       child = child.nextSibling) {
    if (child.id) {
      msgs.push("Child " + child.nodeName + "#" + child.id);
    }
    else {
      msgs.push("Child " + child.nodeName);
    }
  }

  div = document.createElement('div');
  div.innerHTML = msgs.join("<br>");
  document.body.appendChild(div);

})();

    The page resulting from the above (if we assume the script element is added to body at the end) is:

    [Before]Foo[After]
Child DIV#foo
Child SCRIPT

    Live Copy | Source

    As you can see, the generated pseudo-elements are just not present at all as far as the DOM is concerned.

    0 讨论(0)
  • 陌清茗
    2020-12-16 16:13

    you can use jquery to append close button and can assign an close event to it. This jquery and css will work for you.

    CSS

    .bigdivAfter {
    cursor:pointer;
    position: absolute;
    right: //as you want;
    top: //as you want;
    z-index: 999;
}

    JQUERY

    $(document).ready(function(){ 
$(".bigdiv").append('<img class="closeButton" src="http://static.doers.lk/img/closebox.png"/>');
$(".bigdiv .closeButton").click(function () {
   $(".bigdiv").hide();
   }) ;
$(".left div").click(function () {
   $(".bigdiv").show("slow");
}) ;

    I will also suggest you to add image on html itself instead of adding it trough jquery

    0 讨论(0)
 看不清?
提交回复
热议问题