在javascript中是否有任何方法可以在按钮上为不同的文本值设置不同的颜色

时间:2016-11-21 06:14:52

标签: javascript

只有那些按钮具有相同的颜色,它们具有与github标签相同的测试值。

提前致谢。

3 个答案:

答案 0 :(得分:0)

您应首先尝试自己,并在提问时分享您尝试过的代码。

获取所有按钮,比较文本值并设置背景颜色。

function changeButtonsBgColors() {
            var buttons = document.getElementsByTagName('button');
            for (var i = 0; i < buttons.length; i++) {
                var button = buttons[i];
                if (button.value == "Close") button.style.background = '#C0C0C0';
                else if (button.value == "Ok") button.style.background = '#33FF3F';
                else if (button.value == "Done") button.style.background = '#4AC91B';
                else if (button.value == "Delete") button.style.background = '#FF0000';
            }
}

请记住将此代码放在onload事件或页面底部。

答案 1 :(得分:0)

这是完全可行的。假设您正在使用jquery,它看起来像这样:

var bttnText = $('.button-class').html();
if(bttnText == 'some text'){
    $('.button-class').addClass('some-class');
}

答案 2 :(得分:0)

假设您正在使用jQuery,请尝试以下操作:它将使用类颜色文本的任何标签并给它一个随机颜色,如果它与另一个标签的文本匹配,那么它将使用相同的颜色。这是一个jsfiddle链接,看看它是如何工作的。

https://jsfiddle.net/jamiguel77/atg5m6ym/

$(document).ready(function() {
    var colors = [];
    $(".color-text").each(function(key,value){  
    if(colors[$(value).text()]) {
      $(value).css('color', colors[$(this).text()]);
    } else {
      var color = getRandomColor();
      $(value).css('color', color);
      colors[$(value).text()] = color;
    }
  });
});

function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}