한글자마다 span 추가하는 방법이 있을까요? 채택완료
안녕하세요. 퍼블리싱하다가 css로 글자에 애니메이션을 넣을려고하는데요.
예를 들어서
<p><?php echo $view['wr_1'] ?></p>
를 통해 값을 불러오면
뷰페이지에
안녕하세요 라는 텍스트값이 출력됩니다.
여기서 저의 질문은
한글자마다 span을 추가하고싶은데요.
우선 결과값은
<p>안녕하세요</p> 이렇게 나오는데
제가 원하는것은
<p>
<span>안</span><span>녕</span><span>하</span><span>세</span><span>요</span>
</p>
입니당 ㅜ.ㅜ 검색을 많이 해보았지만 방법을 통 모르겠어서
혹시나 한글자마다 span을 자동으로 넣어주는 스크립트가 있을지해서 여쭤봅니다.ㅜㅜ
답변 3개
아래처럼 innerText 를 이용하여 "눈"으로 확인합니다.
<p id=myP>안녕하세요</p>
<script>
myP.innerText = "<span>" + myP.innerText.split("").join("</span><span>") + "</span>";
</script>
눈으로 확인했으면 innerHTML 로 뿌려줍니다.
<p id=myP>안녕하세요</p>
<script>
myP.innerHTML = "<span>" + myP.innerText.split("").join("</span><span>") + "</span>";
</script>
글자수는 100개 1000개라도 상관 없습니다.
아니면... p 에 id를 주지 않고 아래처럼 해도 되구요. 안녕하세요 대신 php 변수를 넣어주면 되겠지요.
<script>
document.write("<p><span>" + ('안녕하세요').split('').join('</span><span>') + "</span></p>");
</script>
답변에 대한 댓글 5개
sinbi제가 웹에 입문할 때부터 주욱 그래 왔어요.
그래서 때에 따라서는 this["myP"] 로 불러도 됩니다.
예를들어 for 문으로 1부터 9까지 돌리면서
this['my' + i].style.width = '300px';
라고 하면 my1 부터 my9 까지 모두 가로가 300 이 되죠
댓글을 작성하려면 로그인이 필요합니다.
한글자마다 태그를 넣는 스크립트는 따로 제공되어지는 부분이 아니고요
해당 부분은 별도로 스크립트를 짜서 구현을 해야 할 부분으로 보여집니다.
참고로 문자열을 배열로 만들어서 태그를 추가해 적용해 주는 함수를 만들어 처리해야 할듯 보여집니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
위 코드 없이도 아이디 인식하나봐요.
새롭게 알았네요. 감사합니다.