[day22]onclick與cursor 和 select樣式問題

2023 iThome 鐵人賽

DAY 22

Modern Web

html/css/js的各種操作系列第 22 篇

15th鐵人賽

oLunao

團隊NUTC_IMAC_WEB_桑貝比

2023-10-07 02:00:32

492 瀏覽

分享至

cursor

在觀察別人網頁的時候你可能常常會看到，奇怪為甚麼這個元件可以點擊?
cursor可以改變你的滑鼠的模樣等等，但主要用途是他賦予了那些，沒有辦法跟使用者互動的元件，可互動的功能

簡單的用法cursor: pointer;

那他與onclick有甚麼關係呢?

onclick

這個是寫在html標籤的事件屬性，他可以觸發javaScript的函式，所以很常用於button or cursor:pointer的物件上

 <style>
            label {
                cursor: pointer;
                border: 1px solid black;
            }
        </style>
        
 <label class="p-2" onclick="label()">label按鈕?</label>
 
 <script>
            function label() {
                console.log("按鈕被點了！")
            }
        </script>

還可以帶數值到函式中唷

 <label class="p-2" onclick="label('安安')">label按鈕?</label>

select樣式問題

上面講的兩個最常使用的地方就是select與option了吧

select因為一些問題導致他的樣式會被固定住無法修改，如果只是為了便利或是小網站確實沒什麼關係，但如果你想給你的網頁有比較好看的外觀就會使用一些方法取代他

最常使用的方法就使用label，結合cursor和onclick來觸發，展開的部分可以把他當作下拉式選單寫在onclick的函式
內容就直接xxx.style.display='flex';再點一下就'none'，如果要用動畫展開效果記得使用height來控制

大概是這樣

<style>
            label {
                cursor: pointer;
                border: 1px solid black;
                width: 120px;
                text-align: center;
            }
            a {
                display: none;
                text-decoration: none;
                color: black;
                border-bottom: 1px solid gray;
            }
            span {
                top: 41px;
                border: 1px solid gray;
            }
        </style>
    
    <body>
        <div class="d-flex justify-content-center mt-5 position-relative">
            <label class="p-2" onclick="label()"> label按鈕? </label>
            <span class="position-absolute" id="frame" style="width: 120px">
                <a href="#">第一行</a>
                <a href="#">第二行</a>
                <a href="#">第三行</a>
            </span>
        </div>
        <script>
            function label() {
                var frame = document.getElementById("frame")
                Array.from(frame.getElementsByTagName("a")).forEach((element) => {
                    element.style.display = element.style.display === "none" ? "block" : "none"
                })
            }
        </script>
    </body>

做的很簡陋，畢竟本章主旨不是自製select，反正就類似這樣，就可以自定義select

謝謝今天的觀看~~