In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > layoutGridLine

layoutGridLine style property

Browser support:

Specifies or returns the gridline value used for laying out Japanese or Chinese characters in a web document.

It has effect only if the layoutGridMode property is set to line or both, and only applies to block elements.

Syntax:

object.layoutGridLine;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: layout-grid-line

Possible values:

The type of this property is string.

One of the following values:

auto

Character grid is to be dependent on the largest character.

height in non-negative length

The height of the gridline in length units. For the supported length units, see the length page.

height in non-negative percentage

The height of the gridline is the specified percentage of the height of the parent element.

none

Default. No grid line is drawn.

Default: none.

Example HTML code 1:

This example illustrates the use of the layout-grid-line property:

<head>
    <style>
        .example {
            layout-grid-line: 15px;
        }
    </style>
</head>
<body>
    <div class="example">
        layout-grid-line: 15px 
        <br />
        between these two lines
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the layoutGridLine property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeLayout (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var layoutValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('layoutGridLine' in div.style) {
                div.style.layoutGridLine = layoutValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">Change the value of the <br />layout-grid-line property</div>

    <br />
    <select onchange="ChangeLayout (this);" size="7">
        <option />5px
        <option />25px
        <option />40px
        <option />60px
        <option />70px
        <option />auto
        <option selected="selected" />none
    </select>
</body>