상자 모형의 넓이, 원소의 넓이를 얻는 예
3700 단어 javascriptcss
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
title>
<style>
#dv1 {
width: 100px;
height: 100px;
border: 2px solid red;
padding: 2px;
margin: 3px;
/*box-sizing: border-box;*/
}
style>
head>
<body>
<div id="dv1">div>
body>
<script>
var dv1 = document.getElementById('dv1');
var width1 = window.getComputedStyle ? window.getComputedStyle(dv1).width : 'nothing!';
var width2 = dv1.style.width;
var width3 = dv1.currentStyle ? dv1.currentStyle.width : 'nothing!';
var width4 = dv1.getBoundingClientRect().width;
console.log('1、 （ ），(IE9 。)：', width1);
console.log(' 2、 style dom ：', width2);
console.log(' 3、IE ： ', width3);
console.log(' 4、 ，width+padding*2+border*2(IE9 。)：', width4);
script>
html>주로 표준 카트리지 모델의 너비와 IE 카트리지 모델의 너비를 올립니다.box-sizing:content-box;설정하지 않을 때.상자 모형의 총 너비는 108px=100+2*2+2*2이다.width+padding*2+border*2입니다.IE박스 모형에서box-sizing:border-box.이때 100px는 상자 모형의 총 너비가 되었고 내용의 너비는 작아져 92px가 되었다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
개별 마크다운 블로그 페이지 만들기 - 13부이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다! 이 기사를 따르려면 을 시작점으로 사용하십시오. blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다. 이 파일[slug].j...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
