JavaScript는 지정된 길이의 문자열을 가로채고 클릭하여 전체 code_javascript 기술을 확장합니다.
- WBOY원래의
- 2016-05-16 15:27:421396검색
글의 길이가 적절하지 않은 경우가 많으며, 이때 상황에 따라 특정 문자열을 가로채는 것이 필요합니다. 그러나 버튼을 클릭하면 여전히 모든 콘텐츠를 확장할 수 있습니다. 다음은 예제를 통해 이 효과를 얻는 방법에 대한 자세한 소개입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>字符串截取展开效果</title>
<style type="text/css">
#thediv{
width:200px;
margin:0px auto;
}
</style>
<script type="text/javascript">
function cutStr(){
var odiv=document.getElementById("thediv");
var str=odiv.innerHTML;
var ospan=document.createElement("span");
var olink=document.createElement("a");
ospan.innerHTML=str.substring(0,20);
olink.innerHTML=str.length>20?"...":"";
olink.href="###";
olink.onclick=function(){
if(olink.innerHTML=="..."){
olink.innerHTML="收起";
ospan.innerHTML=str;
}
else{
olink.innerHTML="...";
ospan.innerHTML=str.substring(0,20);
}
}
odiv.innerHTML="";
odiv.appendChild(ospan);
odiv.appendChild(olink);
};
window.onload=function(){
cutStr();
}
</script>
<body>
<div id="thediv">脚本之家欢迎您，个人的力量再强也只是一只强壮的而已，如果有分享和胸怀和合作的精神，那么就有可能活得巨大进步。</div>
</body>
</html>
위 코드는 우리의 요구 사항을 구현하고 지정된 문자열을 가로채고 "..."로 끝납니다. 이 엔딩을 클릭하면 모든 텍스트 내용이 확장될 수 있습니다. 다음은 이 효과의 구현 프로세스에 대한 소개입니다.
1. 구현 원칙:
span 요소와 요소를 생성한 후 substring() 함수를 사용하여 지정된 문자열을 가로채고 이를 span 요소의 내용으로 설정한 다음 원래 문자열의 길이가 지정된 길이보다 큰지 확인합니다. .더 크면 요소의 콘텐츠가 "..."로 설정됩니다. 그런 다음 원본 div를 지우고 div에 span 요소와 요소를 추가하여 차단 기능을 구현합니다. a 요소에 대한 시간 처리 함수를 등록합니다. 이 버튼을 클릭하면 이벤트 처리 기능이 실행됩니다. 이 함수는 먼저 해당 요소가 어떤 상태인지 확인합니다. 축소된 상태인 경우 a 요소의 내용이 "로 설정됩니다. Collapse" 를 입력하고 원본 문자를 모두 범위에 넣어 확장을 구현합니다. 확장된 상태이면 문자를 가로채고 a 요소의 내용이 수정됩니다. 원리는 대략 동일합니다. 관련 자료를 참조할 수 있습니다.
위 내용은 지정된 길이의 문자열을 가로채기 위해 이 기사에서 소개하는 JavaScript입니다. 전체 코드를 펼치려면 클릭하세요.