자세한 코드 설명은 생략하고 사용법만 추가한다.
코드는 인사이트 출판사의 "자바스크립트 닌자 비급" 책의 assert.js 소스를 수정하여 기능을 추가 하였다.
1. 스크립트 추가
<script type="text/javascript"
src="assert.js"></script>
2. 사용 함수
* 출력함수 : function write(value, desc)
desc 문자열을 출력한다. value 값이 false이면 '취소라인'을 표시한다.
function write(value, desc)
* 출력 함수 : function writeById(id, value, desc)
id에 의해 desc 문자열을 출력한다. value 값이 false이면 '취소라인'을 표시한다.
특정 id로 다시 writeById 함수를 실행하면 기존 문자열이 수정된다.
assert.writeById('mybegin', true, "여기가 시작이다");
* 특정 라인 요소 구하기 : function getElement(index)
3번째 라인을 구할려면 인덱스 2를 입력한다. 인덱스는 0부터 시작이다.
첫번째 라인은 인덱스 0을 넣는다.
assert.getElement(2).innerHTML = 'third line';
* 마지막 라인 요소 구하기: function getLastElement()
//<p
id="demo">demo</p>
document.getElementById('demo').innerHTML = assert.getLastElement().innerHTML;
document.getElementById('demo').innerHTML = assert.getLastElement().innerHTML;
* 특정 라인으로 스크롤 하기
//writeById 함수로 입력한 경우
id로 요소를 얻어와서 scrollIntoView 함수로 스크롤 한다.
var startEl = document.getElementById('mybegin');
startEl.scrollIntoView();
var startEl = document.getElementById('mybegin');
startEl.scrollIntoView();
//마지막 요소로 스크롤 한다.
assert.getLastElement().scrollIntoView();
assert.getLastElement().scrollIntoView();
실행화면이다.
소스 다운로드 :
test.html
assert.js
grass.jpg
참조)
인사이트 출판사 "자바스크립트 닌자 비급" 책의 assert.js 소스 참고
How to dynamically create CSS class in JavaScript and apply?
https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply