Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <a id="alink" style="font-weight: 600">你好啊</a>
</body>
</html>
 
        const getAttAndValueString = (args, isContent) => {
            let startIndex = 0
            const attr = args[0].map((item) => {
                return item.replace('\n', '').replace(/\s/g, '').trim()
            }).filter(item => item)
            const value = args.slice(1).filter(item => item)
            let resultString = ''
            attr.forEach((element, index) => {
                if (element.endsWith(':') || isContent) {
                    resultString += `${element}${value[startIndex]}`
                    startIndex++
                } else {
                    resultString += `${element}`
                }
            })
            return resultString
        }
        HTMLElement.prototype.styles = function () {
            let resultString = getAttAndValueString(Array.from(arguments))
            console.log("resultString", resultString)
            const styleAttr = this.getAttribute("style");
            if (styleAttr) {
                resultString = `${styleAttr.endsWith(";") ? styleAttr : styleAttr + ";"} ${resultString}`
            }
            this.setAttribute("style", resultString);
            return this
        }
        HTMLElement.prototype.props = function () {
            // let resultString = getAttAndValueString(Array.from(arguments))
            // let obj = resultString.split(";").filter(item => item.length > 0)
            // obj.forEach(item => {
            //     const [prop, ...value] = item.split(":");
            //     this.setAttribute(prop, value.join(":"))
            // })
            return this
        }
        HTMLElement.prototype.content = function () {
            // this.innerText = getAttAndValueString(Array.from(arguments), true)
            return this
        }
        var alink = document.querySelector('#alink')
        var color = 'red'
        var bgColor = 'blue'
        var url = 'http://baidu.com'
        alink.styles`
        color:${color};
        font-size:16px;
        background-color:${bgColor};
        `.props`
            href:${url};
            tabIndex:1;
        `.content`跳转到:${url}`
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers