簡體   English   中英

在style屬性內使用CSS選擇器

[英]Using CSS selectors within the style attribute

我有一個漂亮的小按鈕,它使用了很多漂亮的CSS來看起來不錯。

巨大的

這是其背后的代碼(我現在暫時忽略兼容性問題); 如您所見,它使用一些選擇器來懸停和單擊事件。

.button {
    display: inline-block;
    width: 200px;
    height: 200px;
    padding: 15px;
    border-radius: 25px;
    background:linear-gradient(to bottom, hsla(36, 100%, 60%, 1) 5%, hsla(36, 100%, 40%, 1) 100%);
    border:2px solid hsla(36, 100%, 30%, 1);
    box-shadow:inset 0px 2px 2px 0px white;
    position: relative;
    left: 0px;
    top: 0px;
    text-shadow:0px 1px 0px hsla(36, 100%, 30%, 1);
    margin: 25px;
}

.button:hover {
    background:linear-gradient(to bottom, hsla(36, 100%, 65%, 1) 5%, hsla(36, 100%, 45%, 1) 100%);
}

.button:active {
    background:linear-gradient(to bottom, hsla(36, 100%, 40%, 1) 5%, hsla(36, 100%, 60%, 1) 100%);
}

但是,為了簡化將來會有很多按鈕的過程,我希望能夠使按鈕具有自定義的color屬性(下面的buttonColor ),該屬性將由一些JavaScript讀取,並變為Hue / Saturation /輕巧,最終因許多不同的變化而改變。 每個按鈕至少包含三種顏色。 兩個用於漸變,一個用於陰影和邊框。

<div class="button" id="testButton"buttonColor="ff8c00">
    <p class="buttonHeader">foo</p>
    <p class="buttonBody">foo2</p>
</div>

這是我在JavaScript中獲得的功能:

function hexToRgb(hex) {  //converts hexadecimal colors into Red/Green/Blue
    //code omitted for sake of conciseness
    return [r, g, b];
}
function rgbToHsl(r, g, b) { //converts Red/Green/Blue into Hue/Saturation/Lightness
    //ditto
    return [h, s, l]
}

var buttons = document.body.getElementsByClassName('button'); //Gets all elements with button class

for (var i = 0; i < buttons.length; i++) {
    var rgb = hexToRgb(buttons[i].getAttribute("buttoncolor")); //
    var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b)
    //here
}

正確的地方是我被困住的地方。

我可以輕松地修改按鈕的樣式,但前提是它必須處於非活動狀態。 我沒有找到改變它在:hover和:active選擇器下的反應的方法。

使用數據屬性! 嘗試這樣的事情:

<div class="button" id="testButton" data-button-color="ff8c00">
    <p class="buttonHeader">foo</p>
    <p class="buttonBody">foo2</p>
</div>

JS

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}




var buttons = document.body.getElementsByClassName('button'); //Gets all elements with button class

for (var i = 0; i < buttons.length; i++) {
    var rgb = hexToRgb(buttons[i].data("button-color")),
        hsl = rgbToHsl(rgb.r, rgb.g, rgb.b),
        rules = [];
    rules[i][0] = hsl;

    hsl[2] = 100 - hsl[2]; // make second color
    rules[i][1] = hsl;
    var len = rules.length;
    for(;len--;) {
        buttons[i].style = 
            "background: linear-gradient(to bottom, hsla(36, 100%, "+rules[i][0]+"%, 1) 5%, hsla(36, 100%, "+rules[i][1]+"%, 1) 100%);"; // put rules on el
    }
}

編輯

David Walsh在用js向樣式表添加規則方面有出色的文章。

假設您制作了一個規則數組

var rules = [...]; // ['float: left', 'cursor: pointer']

或對象

var rules = {
    'hover': [...], // rules...
    'active': [...]
};

在上面的代碼中。 然后,您可以將它們插入以下內容:

var sheet = (function() {
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    return style.sheet;
})();

function addCSSRule(sheet, selector, rules, index) {
    if("insertRule" in sheet) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else if("addRule" in sheet) {
        sheet.addRule(selector, rules, index);
    }
}

// ['float: left', 'cursor: pointer']
addCSSRules(document.styleSheets[0], ".button:hover", rules.join(';'));

要么

// { 'hover': ['float: left'], 'active': ['cursor: pointer']};
addCSSRules(document.styleSheets[0], ".button:hover", rules.hover.join(';'));
addCSSRules(document.styleSheets[0], ".button:active", rules.active.join(';'));

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM