刷新时更改边框底部和边框顶部颜色

时间:2012-10-30 18:47:22

标签: javascript css colors

我想更改正在处理的网页的边框底部和边框顶部。

这是我的CSS:

.section-title {
    overflow: hidden;
    margin: 0 0 30px 0;
    padding: 20px 0;
    border-bottom: 1px solid #000;
border-top:1px solid #000;
}

这是我的剧本:

     $(document).ready(function () {
  $('section-title').each(function() {
     var col = 'rgb('+ (Math.floor(Math.random()*256)) +',' + (Math.floor(Math.random()*256)) + ','+(Math.floor(Math.random()*256))+')';
     $(this).css('color', col);
    }); });

我做错了什么,或者我该怎么做才能使这项工作成功?得到一个想法; http://www.mirlaklijn.nl/wp-new这是网站。标题上方和下方的两个1像素边框是我想要像链接那样随机更改的内容。

许多人多多感谢思考并尝试了几个小时!

2 个答案:

答案 0 :(得分:1)

您必须设置border-color

$(this).css('border-color', col);

P.S。无需运行自己的each循环。让jQuery为你做,为css提供回调:

$(document).ready(function () {
    $('.section-title').css('border-color', function() {
        return 'rgb(' +
            Math.floor(Math.random() * 256) + ',' + 
            Math.floor(Math.random() * 256) + ',' + 
            Math.floor(Math.random() * 256) + ',' +
        ')';
    });
});

答案 1 :(得分:0)

更改边框颜色的"color"属性不是。它是"border-color""color"属性的目的是仅更改文本颜色(前景色)。

$(this).css('border-color', col);

干杯