with 블럭 사용하기

비타주리

· 3년 전 · 조회 2056 2056 · 댓글 17 17

http://www.mediaplayer.kr/main/bbs/html_editor.php

위 에디터에서 직접 확인하시면 더 좋습니다.

예를 들어서 하나의 div 등을 만들고 아이디를 하나 주고

엘레먼트의 형태가 바뀌는 아래의 이벤트를 주었습니다.

<div id=sir>그누보드</div>
<script>
sir.innerText = "비타주리";
sir.style.color = "#ff0000";
sir.style.padding = "10px";
sir.style.border = "1px solid #cccccc";
sir.style.borderRadius = "10px";
sir.style.textAlign = "center";
</script>

----------

이걸 with 블럭으로 감으면 코드가 상당히 매끈해 집니다.

<div id=sir>그누보드</div>
<script>
with (sir) {
   innerText = "비타주리";
   style.color = "#ff0000";
   style.padding = "10px";
   style.border = "1px solid #cccccc";
   style.borderRadius = "10px";
   style.textAlign = "center";
}
</script>

----------

아래처럼 사용해도 되겠지요.

with 블럭은 단순히 id 나 class 뿐만이 아니라 공통으로 엮인 부분은 모두 대상화 할 수 있습니다.

<div id=sir>그누보드</div>
<script>
sir.innerText = "비타주리";
with (sir.style) {
    color = "#ff0000";
    padding = "10px";
    border = "1px solid #cccccc";
    borderRadius = "10px";
    textAlign = "center";
}
</script>

----------

<div id=sir>그누보드</div>
<script>
with (sir) {
   innerText = "비타주리";
   with (style) {
       color = "#ff0000";
       padding = "10px";
       border = "1px solid #cccccc";
       borderRadius = "10px";
       textAlign = "center";
   }
}
</script>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 17개

김창헌

번호	분류	제목	글쓴이	날짜	조회
5066	기타	[mariadb] 10.6 버전에 추가된 json_table 함수	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1819
5065	PHP	DB 세션 핸들링 [2]	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1529
5064	PHP	혹시 뭐가 잘못되었는지 봐주실수 있나요?? [2]	happyl 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1918
5063	node.js	c++로 만들어진 코드를 바인딩하기 [1]	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1675
5062	node.js	express이용하여 간단하게 api 서버 만들기 [1]	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1693
5061	node.js	Redos ( Regular expression Denial of Service ) 대응관련 모듈	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1416
5060	node.js	Mac os에서 nvm + node 설치편	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1254
5059	node.js	nvm설치 + nodejs 설치	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1250
5058	기타	[mariadb]자연어검색	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	2697
5057	웹서버	ubuntu 20.0 php 8.0 + nginx 설치	DogFoot개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	2726
5056	MySQL	adminer를 이용하여 Table Data 다운로드 하기	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1506
5055	기타	그누보드5에서 소셜로그인, 소셜댓글 사용시 트위터 프로젝트 앱 설정하기	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1435
5054	OS	AWS Lightsail 에서 PHP5.x 버전 설치하기	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	2070
5053	웹서버	AWS Lightsail 에서 PHP8 빠르게 설치하기 [9]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	3632
5052	OS	opendkim 설치	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	2425
5051	PHP	PHP에서 aws cli 를 이용하여 Lambda 함수 생성하기 [4]	편리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	2189
5050	웹서버	apache log 에 접속자의 cookie 정보를 포함하지 않도록 설정하기	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1722
5049	MySQL	INSERT IGNORE INTO `user` (field1, field2, ..., fieldn) SELECT field1, field2, ..., fieldn WHERE user = 'user_id';	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1899
5048	OS	rsync 실행시 password(암호) 묻지 않기 [2]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	2704
5047	PHP	vscode 에서 AWS Lightsail 인스턴스에 접속하기 [10]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	4375
5046	MySQL	WHERE Clasuse 사용해서 특정 조건의 데이타를 가지고 와 HTML Table로 출력하기 [1]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1820
5045	MySQL	PHP Mysql Databae - INSERT INTO Multiple Records, 데이타베이스에 여러개 데이타입력하기 [2]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1944
5044	MySQL	MariaDB 에서 open_files_limit 변경하기 [1]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	4135
5043	MySQL	SELECT data FROM TABLE 유튜브 영상입니다. [1]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1891
5042	기타	[Selenium] proxy를 사용하지 않고 개발자도구에서 Network 탭의 로그를 얻기	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	2636
5041	MySQL	PHP Mysql Database - INSERT INTO [2]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1998
5040	MySQL	PHP Mysql Database - CREATE TABLE	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1726
5039	MySQL	PHP Mysql Database - CREATE DATABASE	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1500
5038	MySQL	PHP Mysql Database - Mysql CONNECT	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	1336
5037	OS	rsync, lsyncd 를 이용한 서버 동기화 [9]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4년 전	4432

with 블럭 사용하기

댓글 작성

댓글 17개

게시판 목록

개발자팁

[기타] [mariadb] 10.6 버전에 추가된 json_table 함수

[PHP] DB 세션 핸들링 [2]

[PHP] 혹시 뭐가 잘못되었는지 봐주실수 있나요?? [2]

[node.js] c++로 만들어진 코드를 바인딩하기 [1]

[node.js] express이용하여 간단하게 api 서버 만들기 [1]

[node.js] Redos ( Regular expression Denial of Service ) 대응관련 모듈

[node.js] Mac os에서 nvm + node 설치편

[node.js] nvm설치 + nodejs 설치

[기타] [mariadb]자연어검색

[웹서버] ubuntu 20.0 php 8.0 + nginx 설치

[MySQL] adminer를 이용하여 Table Data 다운로드 하기

[기타] 그누보드5에서 소셜로그인, 소셜댓글 사용시 트위터 프로젝트 앱 설정하기

[OS] AWS Lightsail 에서 PHP5.x 버전 설치하기

[웹서버] AWS Lightsail 에서 PHP8 빠르게 설치하기 [9]

[OS] opendkim 설치

[PHP] PHP에서 aws cli 를 이용하여 Lambda 함수 생성하기 [4]

[웹서버] apache log 에 접속자의 cookie 정보를 포함하지 않도록 설정하기

[MySQL] INSERT IGNORE INTO `user` (field1, field2, ..., fieldn) SELECT field1, field2, ..., fieldn WHERE user = 'user_id';

[OS] rsync 실행시 password(암호) 묻지 않기 [2]

[PHP] vscode 에서 AWS Lightsail 인스턴스에 접속하기 [10]

[MySQL] WHERE Clasuse 사용해서 특정 조건의 데이타를 가지고 와 HTML Table로 출력하기 [1]

[MySQL] PHP Mysql Databae - INSERT INTO Multiple Records, 데이타베이스에 여러개 데이타입력하기 [2]

[MySQL] MariaDB 에서 open_files_limit 변경하기 [1]

[MySQL] SELECT data FROM TABLE 유튜브 영상입니다. [1]

[기타] [Selenium] proxy를 사용하지 않고 개발자도구에서 Network 탭의 로그를 얻기

[MySQL] PHP Mysql Database - INSERT INTO [2]

[MySQL] PHP Mysql Database - CREATE TABLE

[MySQL] PHP Mysql Database - CREATE DATABASE

[MySQL] PHP Mysql Database - Mysql CONNECT

[OS] rsync, lsyncd 를 이용한 서버 동기화 [9]