Использование селекторов CSS в атрибуте стиля

Question

У меня есть симпатичная маленькая кнопка, которая использует много фантазийных 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%); 
} 

Однако, чтобы упростить процесс в будущем, когда будет много кнопок, вместо этого я хотел, чтобы иметь возможность сделать кнопку иметь пользовательский атрибут цвета (buttonColor ниже), который будет читаться некоторым JavaScript , превратился в Hue/Saturation/Lightness и, в конечном итоге, изменился для многих разных вариантов. Каждая кнопка содержит не менее трех цветов; два для градиента и один для тени и границы.

<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 selectors.

Answer 1

использовать атрибуты данных! попробовать что-то вроде этого:

<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 
    } 
} 

редактировать

Дэвид Уолш имеет отличный пост на adding rules to stylesheets with 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(';'));