Question

我正在尝试使用Javascript在Wordpress页面中搜索特定的十六进制代码，并用其他代码替换该代码。代码是＃FF4500，我想用#FFFFFF替换它。我已经尝试过使用JSFiddle在线的几种解决方案，但还是无法使用它。

HTML：

<div style="padding:5px;background:#FF4500;text-align:center;">Some Text Here</div><br>

这是我试过的：

$(document).ready(function() {
    $('div').each(function () {
        var $this = $(this);
        $this.html($this.text().replace(*FF4500, FFFFFF));
    });
});

Answer 1

香草。

function changeColorRecursive(root, oldColor, newColor) {
  if (root.style) {
    for (var i in root.style) {
      if (typeof(root.style[i]) == 'string' && root.style[i].toLowerCase() == oldColor.toLowerCase())
        root.style[i] = newColor;
    }
  }

  if (root.childNodes) {
    for (var i = 0; i < root.childNodes.length; i++) {
      changeColorRecursive(root.childNodes[i], oldColor, newColor);
    }
  }
}

changeColorRecursive(document.body, "#FF4500", "#FFFFFF");

Answer 2

.html()替换了<div>代码中的内容：Some Text Here。因此，您正在查看Some Text Here并尝试将'FF4500'替换为'FFFFFF'（顺便说一下，使用不正确的语法）。

您希望使用以下内容修改CSS属性：

// Convert RGB to text, as in http://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value
var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\s*\((\d+),\s*(\d+),\s*(\d+)\)$/);
    if(!rgb) return '#000000';
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}

// the function to replace the color codes
$( function() {
    $('div').each(function () {
        var $this = $(this);
        if(rgb2hex($this.css('backgroundColor')) == '#ff4500') {
            $this.css('backgroundColor', '#FFFFFF');
        }
    });
});

Working jsFiddle here

Answer 3

你不能真正与hex比较，因为css（）返回rgb。你不能要求背景，因为你也有其他属性。好的jQuery，我认为这应该工作：

$(document).ready(function(){ 
  $('div').each(function () {
    if( $(this).css('background-color') == 'rgb(255, 69, 0)') {
      $(this).css('background-color', '#FFFFFF')
    }
  }); 
});

Answer 4

好的，我太慢了，但我添加了一些特效。

下次你应该自己开始新的JSFiddle。

rgb匹配肯定是脆弱的，应该归一化回#RRGGBB，但它是第一个工作版本。

尝试更新http://jsfiddle.net/anaran/he6WE/

<强> JS

$(document).ready(function() {
    $('div').each(function () {
        console.log(this.style.backgroundColor);
        if (this.style.backgroundColor.match(/^rgb\(255, 69, 0\)$/)) {
            this.style.transition = 'linear 2s';
            this.style.backgroundColor = '#FFFFFF';
    }
    });
});

我在场的时候......

http://jsfiddle.net/anaran/he6WE/35/使用jQuery UI 1.10.3以及jQuery 2.0.2，显然有jQuery Color支持：

$(document).ready(function() {
    $('div').each(function () {
        // console.warn($.Color(this.style.backgroundColor).toHexString(false));
        if ($.Color(this.style.backgroundColor).toHexString(false).match(/^#FF4500$/i)) {
            this.style.transition = 'linear 2s';
            this.style.backgroundColor = '#FFFFFF';
    }
    });
});

Answer 5

您可以使用JQuery属性选择器执行此操作：

$("div[style*='background:#FF4500;']").each(function() {
    var currStyle = $(this).attr("style");
    $(this).attr("style", currStyle.replace("background:#FF4500;", "background:#FFFFFF;"));
});

选择器将获取包含<div>样式的所有background:#FF4500;元素，然后进入每个元素并将该背景样式替换为新样式。

高度依赖于始终创建的background样式（考虑到它来自Wordpress，我认为会是这样）。另外，我在替换中包含“背景”一词，以避免在样式的其他地方替换该十六进制值。

javascript：使用不同的颜色代码搜索和替换十六进制颜色代码

5 个答案: