close

基本jQuery使用CSS的方法

選擇所有元素

$('*').addClass('line');

使用HTML標籤名稱元素

例如:p、div、a、h2、h1 等

$('p').addClass('blue');

使用 id 屬性元素

$('#list').addClass('red');

相當於JavaScript的document.getElementById('list');

使用 class 屬性元素

$('.item').addClass('green');

相當於JavaScript的document.getElementByClassName('item');

 

程式範例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS選擇元素</title>
<style type="text/css">
    .red{color:red;}
    .blue{color:blue;}
    .green{color: green;}
    .line{border:1px solid #AD14C1}
</style>

</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        $('*').addClass('line');
        $('p').addClass('blue');
        $('#list').addClass('red');
        $('.item').addClass('green');
        
    });
    
</script>

<body>
<p>HTML 標籤名稱元素</p>
<ol id="list">
<li>你好</li>
<li>什麼</li>
<li class="item">快樂</li>
</ol>

</body>
</html>

arrow
arrow
    文章標籤
    javascript jQuery
    全站熱搜
    創作者介紹
    創作者 小甲學習地 的頭像
    小甲學習地

    學習資訊部落

    小甲學習地 發表在 痞客邦 留言(0) 人氣()