메인
기술
메인
기술
무료게임
잡담
자유
개인
일정
갤러리
회원가입
계정 찾기
로그인
HOME
기술
JS로 라운드 DIV만들기
목록
작성자
mins
링크
작성 : 2006-12-04 12:10
조회 : 363
지남
1일간
2006-12-04
-
2006-12-04
좌표
첨부된 파일이 없습니다.
#javascript
function css_round_div(this_s) { //==================== // div_root를 this_s 앞에 위치시킨다.(붙이는거지) //==================== var div_root = document.createElement('div'); // 외각 div if (this_s.nextSibling) this_s.parentNode.insertBefore(div_root,this_s.nextSibling); else this_s.parentNode.appendChild(div_root); //==================== // 특수 스타일 초기화 //==================== div_root.style.margin=this_s.style.margin; if(this_s.width){div_root.style.width = this_s.width;} else{ div_root.style.width=this_s.style.width; } this_s.style.margin = '0px'; this_s.style.width = 'auto'; //==================== // 라운드용 div 만들기 //==================== var div_content = document.createElement('div'); // 내용을 감싸는 부분 div_content.style.backgroundColor=this_s.style.backgroundColor; div_content.style.borderStyle=this_s.style.borderStyle; div_content.style.borderColor=this_s.style.borderColor; div_content.style.borderWidth="0px 1px 0px 1px"; div_content.appendChild(this_s); var div_s1 = document.createElement('div'); // 라운드 1 div_s1.style.backgroundColor=this_s.style.backgroundColor; div_s1.style.overflow ='hidden'; div_s1.style.lineHieght="1px"; div_s1.style.marginRight=div_s1.style.marginLeft="4px"; div_s1.style.display="block"; if(this_s.style.borderTopStyle){ div_s1.style.borderTopColor=this_s.style.borderTopColor; div_s1.style.borderWidth="1px 0px 0px 0px"; div_s1.style.borderStyle=this_s.style.borderStyle; div_s1.style.height="0px"; } var div_s2 = div_s1.cloneNode(true); // 라운드 2 div_s2.style.height="1px"; div_s2.style.backgroundColor=this_s.style.backgroundColor; div_s2.style.marginRight=div_s2.style.marginLeft="3px"; if(this_s.style.borderStyle){ div_s2.style.borderStyle=this_s.style.borderTopStyle; } div_s2.style.borderColor=this_s.style.borderColor; div_s2.style.borderWidth="0px 1px 0px 1px"; var div_s3 = div_s2.cloneNode(true); // 라운드 3 div_s3.style.marginRight=div_s3.style.marginLeft="2px"; var div_s4 = div_s3.cloneNode(true); // 라운드 4 div_s4.style.height="2px"; div_s4.style.marginRight=div_s4.style.marginLeft="1px"; var div_s5 = div_s4.cloneNode(true); // 라운드 4 var div_s6 = div_s3.cloneNode(true); // 라운드 4 var div_s7 = div_s2.cloneNode(true); // 라운드 4 var div_s8 = div_s1.cloneNode(true); // 라운드 4 this_s.style.borderStyle='none'; div_root.appendChild(div_s1); div_root.appendChild(div_s2); div_root.appendChild(div_s3); div_root.appendChild(div_s4); div_root.appendChild(div_content); div_root.appendChild(div_s5); div_root.appendChild(div_s6); div_root.appendChild(div_s7); div_root.appendChild(div_s8); //==================== // "공대여자는 이쁘다"를 나타내야만 쓸 수 잇습니다. //==================== }
"공대여자는 이쁘다."를 나타내야만 쓸 수 있습니다.
"공대여자는 이쁘다."를 나타내야만 쓸 수 있습니다.
댓글
/
/
답변
수정
삭제
No Nickname
No Comment
새로운 댓글 작성
권한이 없습니다.
{{m_row.m_nick}}
내용이 너무 많습니다!
-
no-star
★☆☆☆☆
★★☆☆☆
★★★☆☆
★★★★☆
★★★★★
확인
게시물 : 1702 (114 page)
📅 달력형
📷 갤러리형
RSS
tag
제목
내용
제목+내용
제목+내용+코멘트
작성자
태그
검색
No
제목
작성자
날짜
조회
공지
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
#기본형
공대여자
24-02-06
02-06
49301
공지
유용한 리눅스(LINUX) 명령어
#linux
#command
공대여자
11-03-03
03-03
58047
공지
[공지] 기술 게시판
#etc
#공지
mins01
05-06-24
06-24
59354
1702
GA의 utm_medium 별 기본 채널 그룹
new
#ga
#medium
공대여자
25-08-19
08-19
15
1701
js-pointer-event-handler
1
#pointer
#event
공대여자
25-08-13
08-13
18
1700
reportError()
1
#report
#error
공대여자
25-08-07
08-07
32
1699
queueMicrotask()
2
#microtask
공대여자
25-08-07
08-07
23
1698
UI exclusive dialog
1
#modal
#dialog
공대여자
25-08-06
08-06
42
1697
마우스 등의 입력장치의 폴링레이트 이슈 PC/Mobile
#폴링레이트
#지연시간
#마우스
#팬
공대여자
25-08-01
08-01
56
1696
윈도우에서 포트포워딩 하기
#포트포워딩
공대여자
25-07-29
07-29
45
1695
git hub 소스에서 cors 회피하기
#github
공대여자
25-07-26
07-26
57
1694
웹 폰트 사용시 load, ready 시점 주의
#font
공대여자
25-07-15
07-15
77
1693
js-templater 단순한 JS 템플릿 엔진 만들봤는데...
1
#template
공대여자
25-07-04
07-04
86
1692
웹 페이지에서 선택된 문자열의 너비 알아오기
#text
#range
#width
공대여자
25-06-28
06-28
153
1691
HTML에서 자식요소를 격리 시키기 contain: strict;
2
#contain
#isolate
공대여자
25-06-27
06-27
143
1690
contenteditable="plaintext-only"
#contenteditable
공대여자
25-06-23
06-23
100
1689
openweathermap.org 날씨정보 API
2
#api
#날씨
공대여자
25-06-19
06-19
144
1688
css grid repeat 사용법. (동적 컬럼)
#grid
#auto-fit
#auto-fill
공대여자
25-06-01
06-01
211