假设我有这个字符串:
“你好”在一个<span>
标签,我想为每个字母执行一个代码(例如:隐藏、更改不透明度等)。我怎样才能用 JS/Jquery 做到这一点,而不必这样做:
<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>
这里有几个例子,为每个字符随机应用颜色和大小,而不用将每个字母包装在span
tag.
forEach
循环方法:JSFiddle http://jsfiddle.net/BloodyKnuckles/2prwh01f/
var span = document.querySelector('span')
var str = span.innerHTML
span.innerHTML = ''
str.split('').forEach(function (elem) {
var newSpan = document.createElement('span')
newSpan.style.color = "#"+((1<<24)*Math.random()|0).toString(16)
newSpan.style.fontSize = (Math.random() * (36 - 10) + 10) + 'px'
newSpan.innerHTML = elem
span.appendChild(newSpan)
})
<span>hello</span>
setTimeout
方法:JSFiddle http://jsfiddle.net/BloodyKnuckles/j38k5yhx/
var span = document.querySelector('span')
var str_arr = span.innerHTML.split('')
span.innerHTML = ''
var ii = 0
~function crazy(ii, str_arr, target) {
if ( ii < str_arr.length ) {
var newSpan = document.createElement('span')
newSpan.style.color = "#"+((1<<24)*Math.random()|0).toString(16)
newSpan.style.fontSize = (Math.random() * (72 - 36) + 36) + 'px'
newSpan.innerHTML = str_arr[ii]
target.appendChild(newSpan)
setTimeout(function () {
crazy(ii += 1, str_arr, target)
}, 1000)
}
}(ii, str_arr, span)
<span>hello</span>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)