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 •
edited

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

Pseudo-element & getComputedStyle

https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javscript

let v_dom = document.querySelector(".javascript"), ":before").getPropertyValue("background-image");

getComputedStyle(v_dom);

/*

let big_spans = document.querySelectorAll(`[data-title-span="big-span"]`);

window.getComputedStyle(big_spans[0], null).getPropertyValue("background-image");
// "none"
window.getComputedStyle(big_spans[0], null).getPropertyValue("margin-left");
// "5px"


window.getComputedStyle(big_spans[0], "::after").getPropertyValue("background-image");
window.getComputedStyle(big_spans[0], "::before").getPropertyValue("background-image");

*/

@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017

node-express4-restful-api

xgqfrms-GitHub/node-express4-restful-api#2

@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017

CssToReact

staxmanade/CssToReact#6

@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017 •
edited

html-webpack-plugin

https://www.codecademy.com/articles/react-setup-iv

https://github.com/jantimon/html-webpack-plugin

Configuration

https://github.com/jantimon/html-webpack-plugin#configuration

{
    entry: 'index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            filename: 'assets/index.html'
        })
    ]
}




{
    entry : 'index.js',
    output : {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin(), // Generates default index.html
        new HtmlWebpackPlugin({  // Also generate a test.html
            filename: 'test.html',
            template: 'src/assets/test.html'
        })
    ]
}

Customize & SEO

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

index.html

https://www.xgqfrms.xyz

https://cdn.xgqfrms.xyz

<!DOCTYPE html>
<html lang="zh-Hans" manifest="manifest.appcache">
<!-- manifest.json -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- SEO meta:-->
    <meta name="author" content="xgqfrms">
    <meta name="tools" content="Sublime Text 3">
    <meta name="keywords" content="cdn,xgqfrms,xyz,github,free,CDN, cdn.xgqfrms.xyz,">
    <meta name="description" content="free CDN : CDN for everyone who want to speed his website freely! published on cdn.xgqfrms.xyz">
    <meta name="application-name" content="free CDN: cdn.xgqfrms.xyz">
    <title>Customize & SEO</title>
    <!-- shortcut iconl -->
    <link rel="shortcut icon" type="image/png" href="logo.png">
    <link rel="shortcut icon" type="image/png" href="https://raw.githubusercontent.com/xgqfrms/cdn/gh-pages/logo/logo.png">
    <!-- css links -->
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/media.css" media="all">
    <!-- other SEO -->
    <link rel="author" type="text/plain" href="https://cdn.xgqfrms.xyz/humans.txt" />
    <link rel="sitemap" type="text/xml" href="https://cdn.xgqfrms.xyz/sitemap.xml" />
    <!-- css libs -->
    <!-- css social media -->
</head>

<body>
    <header>
        <nav></nav>
        <h1>semantics html5</h1>
    </header>
    <section>
        <article></article>
    </section>
    <footer class="site-footer">
        <span class="site-footer-owner">
            <a href="https://cdn.xgqfrms.xyz/index.html" target="_blank">CDN</a> is maintained by
            <a href="https://www.xgqfrms.xyz" target="_blank">xgqfrms & webgeeker</a>.
        </span>
        <span class="site-footer-credits">
            <mark id="spanYear"></mark>
        </span>
    </footer>
    <!-- js -->
    <script src="https://cdn.xgqfrms.xyz/plugins/getfullyear.js" async type="text/javascript"></script>
</body>

</html>

@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017

Ant-Design

https://gist.github.com/xgqfrms-gildata/f2b41a63feb21081e9f51d464d7434d7#gistcomment-2134580

@xgqfrms-GitHub
Copy link

JavaScript 蜘蛛

https://gist.github.com/xgqfrms-GitHub/3db8891c7ef6f79ea1996f2a4d29f499

const links = document.querySelectorAll(`ul.image-list a`);

let svg_name_arr = [];
let svg_url_obj = {};

for (let i = 0; i < links.length; i++) {
    if (links[i].getAttribute('class')) {
        let x = links[i].getAttribute('class');
        let y = links[i].setAttribute('download', `${i}-${x}`.svg)
        svg_name_arr.push(x);
        let img = getComputedStyle(links[i], '::before').getPropertyValue('background-image');
        let newImage = img.replace(/(url\(")|("\))/g,'');
        svg_url_obj[i] = newImage;
    }
}

console.log(`svg_name_arr = \n`, svg_name_arr);

console.log(`svg_url_obj = \n`, svg_url_obj);

@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017

virtual dom & DocumentFragment & insertAdjacentHTML

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

DocumentFragment 接口表示表示一个没有父级文件的最小文档对象。

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

let docFragment = document.createDocumentFragment();

// assuming it exists (ul element)

let ul = document.getElementsByTagName("ul")[0],
    docfrag = document.createDocumentFragment();

const browserList = [
    "Internet Explorer", 
    "Mozilla Firefox", 
    "Safari", 
    "Chrome", 
    "Opera"
];

browserList.forEach((e) => {
    let li = document.createElement("li");
    li.textContent = e;
    docfrag.appendChild(li);
});

ul.appendChild(docfrag);

https://stackoverflow.com/questions/16126960/what-is-the-difference-between-appendchild-insertadjacenthtml-and-innerhtml

insertAdjacentHTML & insertAdjacentElement & insertAdjacentText

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

element.insertAdjacentHTML(position, text);


<!-- beforebegin -->
    <p>
        <!-- afterbegin -->
        foo
        <!-- beforeend -->
    </p>
<!-- afterend -->

https://gist.github.com/xgqfrms-gildata/f2b41a63feb21081e9f51d464d7434d7#gistcomment-2134601

@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