javascript - 如何从 div[html+jquery] 中获取文本
问题描述
我正在为我的目的更改动画代码,并且无法从 div 中获取文本以对其进行动画处理。
原创动画: https ://codepen.io/Lunoware/pen/gjYjBw
我的代码(我删除了输入、脚本的输入部分和“if”指令)
<div class="container">
<div class="row">
<p id="text">Test</p>
</div>
</div>
CSS
@background: #0bc020;
#text{
font-size: 2.5em;
font-weight: bold;
transition-duration: 1.5s;
.char-outer-space{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
}
.char-outer{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 5px;
.char-inner{
position: absolute;
animation-name: jumping;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
left:0px;
top:-15px;
}
}
}
}
@keyframes jumping {
from {
transform: translate(0, 8px);
}
to {
transform: translate(0, -0px);
}
}
jQuery
jQuery(document).ready(function(){
function splitHtmlString(text){
var string = '#text';
var charArr = string.split("");
var fixedString = "";
charArr.forEach(function(char, index) {
var offset = -index/10;
if(char != " "){
fixedString += "<span class='char-outer' style='animation-delay:" + offset + "s;'><span class='char-inner' style='animation-delay:" + offset + "s;'>" + char + "</span></span>";
}else{
fixedString += "<span class='char-outer-space'></span>";
}
});
$("#text").html(fixedString);
}
splitHtmlString("");
});
我需要从 div 获取文本的行
解决方案
您可以在W3schools中找到更多参考资料
//get value as html
$('#text').html()
//get value as text
$('#text').text()
推荐阅读
- events - 谷歌日历 API 问题(已删除项目)
- wix - 如果已安装应用程序,如何创建自定义错误对话框?
- angular - 无法使用日期字符串对物料表列进行排序
- python - python中的数据表示差异
- html - 无法用鼠标单击列表中的第一个单选按钮,但可以使用向上和向下箭头键选择它
- java - 是否可以从对象数组中删除索引?
- python - 使用 python 将 [abc] 转换为 [a,b,c]
- django - DRF 序列化程序错误:AttributeError:“FeedPostSerializer”对象没有属性“auth_user”
- css - Webpack CSS 输出总是最小化
- python - 带条件的左外连接