突出變化？

HTML：突出變化？

<html> 
<body> 
    <textarea>Original Text</textarea> 
    <button>Replace</button> 
</body> 
</html>

的jQuery：

$(function() { 
$('button').click(function() { 
    $('body').html($('body').html().replace('Original','New')); 
}); 
});

http://jsfiddle.net/r7MgY/

我可以用一個衰落的黃色背景也許突出的變化不知何故？

來源

2010-05-19 3zzy

正如Sarfraz所說，使用jQuery顏色插件。用法與jQuery中的動畫方法相同。該插件將覆蓋這些屬性的動畫方法：'backgroundColor'，'borderBottomColor'，'borderLeftColor'，'borderRightColor'，'borderTopColor'，'顏色'，'outlineColor'。

jQuery的動畫的方法使用和信息可以在這裏找到：http://api.jquery.com/animate/

另外，如果你想這是更好地獲取標籤的包裝標籤上的HTML來代替的東西，包含要調用的替代方法是什麼而不是通過整個身體作爲一個字符串進行搜索。通常你會使用：

$('#idOfMyWrapperTag').html().replace('this', 'that')

但由於您使用的是textarea的，你可以得到它的值與此：

$('textarea').val().replace('this', 'that');

..fredrik

來源

2010-05-19 07:55:13 fredrik

+1指出，它是更好的使用選擇器比作爲一個字符串搜索身體 – 2010-05-19 08:04:18

我可以用某種方式突出變化：淡黃色背景可能嗎？

你將不得不使用jquery color plugin褪色的背景顏色。

來源

2010-05-19 07:43:48 Sarfraz

謝謝，但沒有可用的插件文檔。 :( – 3zzy 2010-05-19 08:28:40

@Nimbuz：對不起，但看到這個：http://plugins.jquery.com/project/color – Sarfraz 2010-05-19 08:30:38

因爲它的textarea，你不能直接注入任何HTML到內容中。你將不得不疊加一個絕對定位的元素，其中包含一個紅色的波形或類似的東西 - 這在編制文本的確切位置時會變成一場噩夢。

如果可能的話，溝渠textarea，只是使用可編輯的div或類似。

來源

2010-05-19 07:53:29

您也許能要解決它

$(function() { 
    $('button').click(function() { 
    $('body').html($('body').html().replace(/Original/g,'<span class="fade" style="opacity: 0; background-color: yellow;">New</span>')); 
    $('.fade').animate({ 
     'opacity': 1 
    }, 1000, function(){ 
     $(this).contents().unwrap(); 
    }); 
    }); 
});

來源

2010-05-19 07:56:08 jAndy

只有一件事要保持記住這是跨度內的文本也會消失。 – fredrik 2010-05-19 08:00:26

如果你不想包含另一個插件，你可以簡單地用一個小的jQuery代碼ACCOM plish衰落覆蓋：

jQuery.fn.highlight = function() { 
    $(this).each(function() { 
     var el = $(this); 
     el.before("<div/>") 
     el.prev() 
      .width(el.width()) 
      .height(el.height()) 
      .css({ 
       "position": "absolute", 
       "background-color": "#ffff99", 
       "opacity": ".9" 
      }) 
      .fadeOut(500); 
    }); 
} 

$("#target").highlight();

幸得這樣的回答：https://stackoverflow.com/a/11589350/1145177

來源

2012-10-15 05:40:21

回答

相關問題