Question

jquery或者js，获取匹配字符串更换CSS样式

比如说
有个div的class名为name

有个div的class名为box

使用jquery或者js实现：
如果name里面含有字符串"您好"的话，box的背景颜色为黄色；
如果name里面含有字符串"再见"的话，box的背景颜色为红色；

Answer 1

你好，根据你的要求，我写了下面的范例代码，请参考：

<script type="text/javascript">
  //记得要先引入jQuery.js框架哦
  $(document).ready(function(){
    if($('.name').text().match('您好')){  //如果包含“您好”
      $('.box').css('background','yellow');  //box背景为黄色
    }
    if($('.name').text().match('再见')){  //如果包含“再见”
      $('.box').css('background','red');  //box背景为红色
    }
  });
</script>

附：完整的HTML范例代码，用浏览器打开即可看到效果。

如还有疑惑，欢迎追问。

追问

不错不错~~清晰明了 谢谢

Answer 2

使用javascript实现。

1、获取所有div

2、判断是否是需要的div

3、改变目标div的背景

var divs = document.getElementsByTagName("DIV");//获取所有div
var nameDiv,boxDiv;//分别声明两个div，js没有类选择器，只能自己通过循环查找
for(var i=0;i<divs.length;i++) {
    var div = divs[i];
    var attr = div.getAttribute("class");
    if(attr == "name")
        nameDiv = div;//获取class为name的div
    else if(attr == "box")
        boxDiv = div;//获取class为box的div
}
if(nameDiv.innerHTML.indexof("您好") > 0) {
    boxDiv.style.background="yellow";//颜色设置为黄色
} else if(nameDiv.innerHTML.indexof("再见") > 0) {
    boxDiv.style.background="red";//颜色设置为红色
}

以下使用jquery。jquery存在类选择器，所以可以直接取到所要的元素。

var nameDiv = $(".name").text();
var boxDiv = $(".box").text();
if(nameDiv.match('您好'))
    $(".box").attr("background","yellow");
if(nameDiv.match('再见'))
    $(".box").attr("background","red");

Answer 3

$('.div').css('color','red');

选中包含该字符串的div节点,用jquery的css()方法,可以改变样式