outline · Properties · CSS

The outline CSS property is shorthand for outline-color, outline-style, and outline-width.

<!doctype html>
<html>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button><br>
    <button onmouseover="myfunction(value)" value="solid red">color</button>
    <button onmouseover="myfunction(value)" value="solid currentColor">currentColor</button>
    <button onmouseover="myfunction(value)" value="solid invert">invert</button><br>
    <button onmouseover="myfunction(innerHTML)">auto</button>
    <button onmouseover="myfunction(innerHTML)">dashed</button>
    <button onmouseover="myfunction(innerHTML)">dotted</button>
    <button onmouseover="myfunction(innerHTML)">double</button>
    <button onmouseover="myfunction(innerHTML)">groove</button>
    <button onmouseover="myfunction(innerHTML)">hidden</button>
    <button onmouseover="myfunction(innerHTML)">inset</button>
    <button onmouseover="myfunction(innerHTML)">none</button>
    <button onmouseover="myfunction(innerHTML)">outset</button>
    <button onmouseover="myfunction(innerHTML)">ridge</button>
    <button onmouseover="myfunction(innerHTML)">solid</button><br>
    <button onmouseover="myfunction(value)" value="solid 1px">length</button>
    <button onmouseover="myfunction(value)" value="solid medium">medium</button>
    <button onmouseover="myfunction(value)" value="solid thick">thick</button>
    <button onmouseover="myfunction(value)" value="solid thin">thin</button>
    <p>outline</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.outline = myparameter;
        }
    </script>
</body>
</html>

20 · JS · Internal

<!doctype html>
<html>
<body>
    <button>initial</button><br>
    <button value="solid red">color</button>
    <button value="solid currentColor">currentColor</button>
    <button value="solid invert">invert</button><br>
    <button>auto</button>
    <button>dashed</button>
    <button>dotted</button>
    <button>double</button>
    <button>groove</button>
    <button>hidden</button>
    <button>inset</button>
    <button>none</button>
    <button>outset</button>
    <button>ridge</button>
    <button>solid</button><br>
    <button value="solid 1px">length</button>
    <button value="solid medium">medium</button>
    <button value="solid thick">thick</button>
    <button value="solid thin">thin</button>
    <p>outline</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.outline = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>