read : JS로 라운드 DIV만들기 : 기술 #javascript::공대여자홈

JS로 라운드 DIV만들기

목록

작성자 mins

링크 작성 : 2006-12-04 12:10 조회 : 122
지남 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	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	5592
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	15179
공지	[공지] 기술 게시판	mins01	06/24 15:10	15374

일	월	화	수	목	금	토
4.28	4.29	4.30	5.1	5.2	5.3	5.4
5.5	5.6	5.7	5.8	5.9	5.10 swiper 에서 부모가 보이고 안보이고 할 때 슬라이드가 이상해지는 것 현상 방지 옵션. new	5.11
5.12	5.13	5.14	5.15	5.16	5.17	5.18
5.19	5.20	5.21	5.22	5.23	5.24	5.25
5.26	5.27	5.28	5.29	5.30	5.31	6.1