how to add an event listener to a CSS Pseudo-element ???

stackoverflow

https://stackoverflow.com/q/9395858/8202629

https://stackoverflow.com/questions/5598675/javascript-find-pseudo-elements

`getComputedStyle`

$('*').filter(function(){return getComputedStyle(this, ':before').length != 0});

`getComputedStyle` & `getDefaultComputedStyle`

let style = window.getComputedStyle(element, [pseudoElt]);

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getDefaultComputedStyle

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getDefaultComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value

computed_value

let elem1 = document.getElementById("elemId");
let style = window.getComputedStyle(elem1, null);

// 它等价于
// let style = document.defaultView.getComputedStyle(elem1, null);

<style>
    #elem-container{
        position: absolute;
        left:     100px;
        top:      200px;
        height:   100px;
    }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
    function getTheStyle(){
        let elem = document.getElementById("elem-container");
        let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
        document.getElementById("output").innerHTML = theCSSprop;
    }
    getTheStyle();
</script>

event delegation

https://javascript.info/event-delegation

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

jquery

https://learn.jquery.com/events/event-delegation/

EJS

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <section></section>
    </body>
</html>

plugins: [
    new HtmlWebpackPlugin({
        title: 'Custom template',
        template: 'my-index.ejs', // Load a custom template (ejs by default see the FAQ for details)
    })
]


module: {
    loaders: [
        { test: /\.hbs$/, loader: "handlebars" }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        title: 'Custom template using Handlebars',
        template: 'my-index.hbs'
    })
]

"htmlWebpackPlugin": { "files": { "css": [ "main.css" ], "js": [ "assets/head_bundle.js", "assets/main_bundle.js"], "chunks": { "head": { "entry": "assets/head_bundle.js", "css": [ "main.css" ] }, "main": { "entry": "assets/main_bundle.js", "css": [] } } } }

xyzdata/event-listener-CSS-Pseudo-element-getComputedStyle.md

how to add an event listener to a CSS Pseudo-element ???

`getComputedStyle`

`getComputedStyle` & `getDefaultComputedStyle`

event delegation

xyzdata commented Jun 28, 2017

xyzdata commented Jun 28, 2017

xyzdata commented Jun 28, 2017

xgqfrms-GitHub commented Jul 4, 2017

xyzdata commented Sep 12, 2017 •

edited

Loading

xyzdata/event-listener-CSS-Pseudo-element-getComputedStyle.md

how to add an event listener to a CSS Pseudo-element ???

getComputedStyle

getComputedStyle & getDefaultComputedStyle

event delegation

xyzdata commented Jun 28, 2017

EJS

xyzdata commented Jun 28, 2017

xyzdata commented Jun 28, 2017

xgqfrms-GitHub commented Jul 4, 2017

React State

xyzdata commented Sep 12, 2017 • edited Loading

getComputedStyle() & getPropertyValue()

`getComputedStyle`

`getComputedStyle` & `getDefaultComputedStyle`

xyzdata commented Sep 12, 2017 •

edited

Loading