홈페이지>웹 디자인 튜토리얼>CSS 튜토리얼

JavaScript CSS 스타일 속성 비교표

저자：Eve Cole 업데이트 시간：2009-06-12 17:47:10

특별한 효과를 얻으려면 Javascript를 사용하여 특정 태그의 CSS 속성을 동적으로 변경해야 합니다. 예를 들어 마우스가 이미지 위로 지나갈 때 이미지에 테두리를 추가합니다. 코드는 다음과 같습니다.

JavaScript 코드
  1. <script type= "text/javascript" >
  2.      function imageOver(e) {
  3. e.style.border= "1px 단색 빨간색 "
  4. }
  5.      function imageOut(e) {
  6. e.style.borderWidth=0;
  7. }
  8. </script>
  9. <img src= "phplamp.gif" onmouseover= "imageOver(this)" onmouseout= "imageOut(this)" />

JavaScript 스타일 뒤 의 속성은 무엇이어야 합니까?

JavaScript CSS 스타일 속성 비교 테이블
borderTopStyle 하단-오른쪽 글꼴 간격 줄 바꿈 줄 정렬 텍스트 텍스트 장식 텍스트들여쓰기
상자 레이블 및 속성 비교
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border -color borderColor
border- left
-color left border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border -top-style
border-top-width borderTopWidth
border-width borderWidthclearclear
float float
스타일 여백
여백 margin
-bottom margin
여백-왼쪽 여백왼쪽 여백
여백 오른쪽
여백-상단 여백상단
패딩 padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
 
색상 및 배경 레이블 및 속성 비교
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
 
스타일 태그 및 속성은 CSS 구문과 비교됩니다
(대소문자 구분) JavaScript 구문(대소문자 구분)
표시 표시
list-style-type listStyleType
목록-스타일-이미지 listStyleImage
목록-스타일-위치 목록 StylePosition
목록-스타일 listStyle
공백 공백
 
텍스트 스타일 태그 및 속성은
CSS 구문과 비교됩니다(대소문자 구분) JavaScript 구문(대소문자 구분)
글꼴 글꼴
군 글꼴 가족
글꼴 크기 글꼴 크기
글꼴 스타일 글꼴스타일 글꼴 변형
글꼴변형 글꼴 가중치
글꼴 가중치
 
텍스트 레이블 및 속성 비교
CSS 구문(대소문자 구분) JavaScript 구문(대소문자 구분)
문자 간격 문자
선 나누기
높이 줄 높이
텍스트정렬
텍스트 장식
텍스트 들여쓰기
텍스트 정렬 텍스트 정렬
텍스트 변환 textTransform
수직 정렬 수직 정렬
관련 기사