Skip to content

Instantly share code, notes, and snippets.

@xyzdata

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

Created June 28, 2017 04:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save xyzdata/a671f49a8aa3b6985dbfb9ae14d78081 to your computer and use it in GitHub Desktop.
Save xyzdata/a671f49a8aa3b6985dbfb9ae14d78081 to your computer and use it in GitHub Desktop.
Download ZIP
how to add an event listener to a CSS Pseudo-element
Raw
event-listener-CSS-Pseudo-element-getComputedStyle.md

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/

@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017

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'
    })
]

https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates

@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017 


"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
Copy link
Author

xyzdata commented Jun 28, 2017

https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

@xgqfrms-GitHub
Copy link

React State

https://gist.github.com/xgqfrms-GitHub/a9869ffb1202562991cfbf77d67a95ef#gistcomment-2139610

@xyzdata
Copy link
Author

xyzdata commented Sep 12, 2017 •
edited

getComputedStyle() & getPropertyValue()

image

getComputedStyle(document.querySelector('span.search-box'), '::after').getPropertyValue('content');

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment