layoutGridMode, layoutGridType, layoutGridLine, layoutGridChar 속성 예제

개체의 레이아웃 그리드 모드 적용
This DIV is a block element.
layoutGridMod
layoutGridType
layoutGridLine
layoutGridChar
결과 표시창
<STYLE>button{width:50}</STYLE>
<SCRIPT>
function doShow(){
  str='divObj.currentStyle.layoutGridMode='+divObj.currentStyle.layoutGridMode+'<BR>';
  str+='divObj.currentStyle.layoutGridType='+divObj.currentStyle.layoutGridType+'<BR>';
  str+='divObj.currentStyle.layoutGridLine='+divObj.currentStyle.layoutGridLine+'<BR>';
  str+='divObj.currentStyle.layoutGridChar='+divObj.currentStyle.layoutGridChar+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id=divObj style="layout-grid-mode:line;border:solid 1 blue;padding:5">개체의 레이아웃 그리드 모드 적용<BR>
This DIV is a block element.</DIV>
<TABLE>
<TR>
<TD class=button>layoutGridMod</TD>
<TD><BUTTON onclick="divObj.style.layoutGridMode='both';doShow()">both</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridMode='line';doShow()">line</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridMode='char';doShow()">char</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridMode='none';doShow()">none</BUTTON></TD>
</TR>
<TR>
<TD class=button>layoutGridType</TD>
<TD><BUTTON onclick="divObj.style.layoutGridType='loose';doShow()">loose</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridType='strict';doShow()">strict</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridType='fixed';doShow()">fixed</BUTTON></TD>
</TR>
<TR>
<TD class=button>layoutGridLine</TD>
<TD><BUTTON onclick="divObj.style.layoutGridLine='auto';doShow()">auto</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridLine='20px';doShow()">20px</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridLine='40%';doShow()">40%</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridLine='none';doShow()">none</BUTTON></TD>
</TR>
<TR>
<TD class=button>layoutGridChar</TD>
<TD><BUTTON onclick="divObj.style.layoutGridChar='auto';doShow()">auto</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridChar='15px';doShow()">15px</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridChar='20%';doShow()">20%</BUTTON></TD>
<TD><BUTTON onclick="divObj.style.layoutGridChar='none';doShow()">none</BUTTON></TD>
</TR>
</TABLE>
<DIV id=showA>결과 표시창</DIV>