<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery CSS 操作全演示</title>
<!-- 引入 jQuery -->
<script src="/template/pc/skin/js/jquery-3.7.0.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1, h2 {
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.demo-box {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.target-element {
width: 200px;
height: 100px;
background-color: #e0e0e0;
margin: 15px 0;
padding: 10px;
border: 2px solid #999;
transition: all 0.3s ease;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
margin: 5px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background-color: #45a049;
}
.code-block {
background-color: #f8f8f8;
border-left: 4px solid #4CAF50;
padding: 10px;
margin: 10px 0;
overflow-x: auto;
}
.controls {
margin: 15px 0;
}
.color-preview {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
vertical-align: middle;
border: 1px solid #ddd;
}
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>jQuery CSS 操作全演示</h1>
<div class="demo-box">
<h2>1. css() 方法基础</h2>
<p><strong>.css(propertyName)</strong> - 获取样式属性值</p>
<p><strong>.css(propertyName, value)</strong> - 设置单个样式属性</p>
<p><strong>.css({property1: value1, property2: value2})</strong> - 设置多个样式属性</p>
<div class="controls">
<button id="getWidth">获取宽度</button>
<button id="setRedBg">设置红色背景</button>
<button id="setMultiStyles">设置多个样式</button>
<button id="resetStyles1">重置样式</button>
</div>
<div id="element1" class="target-element">目标元素 #1</div>
<div class="code-block">
<pre><code>// 获取样式
$('#getWidth').click(function() {
alert('宽度: ' + $('#element1').css('width'));
});
// 设置单个样式
$('#setRedBg').click(function() {
$('#element1').css('background-color', 'red');
});
// 设置多个样式
$('#setMultiStyles').click(function() {
$('#element1').css({
'background-color': 'lightblue',
'border': '3px solid darkblue',
'color': 'white',
'font-weight': 'bold'
});
});
// 重置样式
$('#resetStyles1').click(function() {
$('#element1').css({
'background-color': '#e0e0e0',
'border': '2px solid #999',
'color': 'inherit',
'font-weight': 'normal'
});
});</code></pre>
</div>
</div>
<div class="demo-box">
<h2>2. 尺寸相关方法</h2>
<table>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
<tr>
<td>.width() / .height()</td>
<td>获取或设置元素的宽度/高度（不包括内边距、边框和外边距）</td>
</tr>
<tr>
<td>.innerWidth() / .innerHeight()</td>
<td>获取或设置元素的宽度/高度（包括内边距，但不包括边框和外边距）</td>
</tr>
<tr>
<td>.outerWidth() / .outerHeight()</td>
<td>获取或设置元素的宽度/高度（包括内边距和边框，但不包括外边距）</td>
</tr>
<tr>
<td>.outerWidth(true) / .outerHeight(true)</td>
<td>获取或设置元素的宽度/高度（包括内边距、边框和外边距）</td>
</tr>
</table>
<div class="controls">
<button id="getDimensions">获取各种尺寸</button>
<button id="setDimensions">设置宽度高度</button>
<button id="resetDimensions">重置尺寸</button>
</div>
<div id="element2" class="target-element">目标元素 #2</div>
<div class="code-block">
<pre><code>// 获取各种尺寸
$('#getDimensions').click(function() {
let html = '宽度: ' + $('#element2').width() + '<br>';
html += '高度: ' + $('#element2').height() + '<br>';
html += 'innerWidth: ' + $('#element2').innerWidth() + '<br>';
html += 'outerWidth: ' + $('#element2').outerWidth() + '<br>';
html += 'outerWidth(true): ' + $('#element2').outerWidth(true);
$('#element2').html(html);
});
// 设置尺寸
$('#setDimensions').click(function() {
$('#element2').width(300).height(150);
});
// 重置尺寸
$('#resetDimensions').click(function() {
$('#element2').width(200).height(100).html('目标元素 #2');
});</code></pre>
</div>
</div>
<div class="demo-box">
<h2>3. 位置相关方法</h2>
<table>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
<tr>
<td>.offset()</td>
<td>获取或设置元素相对于文档的当前位置</td>
</tr>
<tr>
<td>.position()</td>
<td>获取元素相对于最近定位祖先元素的位置</td>
</tr>
<tr>
<td>.scrollLeft() / .scrollTop()</td>
<td>获取或设置元素的滚动条位置</td>
</tr>
</table>
<div class="controls">
<button id="getPosition">获取位置信息</button>
<button id="setOffset">设置偏移位置</button>
<button id="resetPosition">重置位置</button>
</div>
<div style="position: relative; height: 200px; border: 1px dashed #999; margin: 15px 0;">
<div id="element3" class="target-element" style="position: absolute; top: 20px; left: 30px;">目标元素 #3</div>
</div>
<div class="code-block">
<pre><code>// 获取位置信息
$('#getPosition').click(function() {
let offset = $('#element3').offset();
let position = $('#element3').position();
let html = 'offset: top=' + offset.top + ', left=' + offset.left + '<br>';
html += 'position: top=' + position.top + ', left=' + position.left;
$('#element3').html(html);
});
// 设置偏移位置
$('#setOffset').click(function() {
$('#element3').offset({ top: 50, left: 100 });
});
// 重置位置
$('#resetPosition').click(function() {
$('#element3').offset({ top: 20, left: 30 }).html('目标元素 #3');
});</code></pre>
</div>
</div>
<div class="demo-box">
<h2>4. 类操作相关方法</h2>
<table>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
<tr>
<td>.addClass()</td>
<td>向元素添加一个或多个类</td>
</tr>
<tr>
<td>.removeClass()</td>
<td>从元素移除一个或多个类</td>
</tr>
<tr>
<td>.toggleClass()</td>
<td>切换元素的类（添加/移除）</td>
</tr>
<tr>
<td>.hasClass()</td>
<td>检查元素是否包含特定类</td>
</tr>
</table>
<div class="controls">
<button id="addHighlight">添加高亮类</button>
<button id="removeHighlight">移除高亮类</button>
<button id="toggleHighlight">切换高亮类</button>
<button id="checkHighlight">检查高亮类</button>
</div>
<div id="element4" class="target-element">目标元素 #4</div>
<style>
.highlight {
background-color: yellow;
border-color: orange;
box-shadow: 0 0 10px rgba(255,165,0,0.5);
}
</style>
<div class="code-block">
<pre><code>// 添加类
$('#addHighlight').click(function() {
$('#element4').addClass('highlight');
});
// 移除类
$('#removeHighlight').click(function() {
$('#element4').removeClass('highlight');
});
// 切换类
$('#toggleHighlight').click(function() {
$('#element4').toggleClass('highlight');
});
// 检查类
$('#checkHighlight').click(function() {
if ($('#element4').hasClass('highlight')) {
alert('元素有 highlight 类');
} else {
alert('元素没有 highlight 类');
}
});</code></pre>
</div>
</div>
<div class="demo-box">
<h2>5. 显示/隐藏相关方法</h2>
<table>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
<tr>
<td>.show()</td>
<td>显示匹配的元素</td>
</tr>
<tr>
<td>.hide()</td>
<td>隐藏匹配的元素</td>
</tr>
<tr>
<td>.toggle()</td>
<td>切换元素的显示/隐藏状态</td>
</tr>
<tr>
<td>.fadeIn() / .fadeOut()</td>
<td>淡入/淡出效果显示或隐藏元素</td>
</tr>
<tr>
<td>.slideDown() / .slideUp()</td>
<td>滑动效果显示或隐藏元素</td>
</tr>
</table>
<div class="controls">
<button id="showElement">显示元素</button>
<button id="hideElement">隐藏元素</button>
<button id="toggleElement">切换显示/隐藏</button>
<button id="fadeToggle">淡入淡出切换</button>
<button id="slideToggle">滑动切换</button>
</div>
<div id="element5" class="target-element">目标元素 #5</div>
<div class="code-block">
<pre><code>// 显示元素
$('#showElement').click(function() {
$('#element5').show();
});
// 隐藏元素
$('#hideElement').click(function() {
$('#element5').hide();
});
// 切换显示/隐藏
$('#toggleElement').click(function() {
$('#element5').toggle();
});
// 淡入淡出切换
$('#fadeToggle').click(function() {
$('#element5').fadeToggle(500);
});
// 滑动切换
$('#slideToggle').click(function() {
$('#element5').slideToggle(500);
});</code></pre>
</div>
</div>
<script>
$(document).ready(function() {
// 第一部分：css() 方法
$('#getWidth').click(function() {
alert('宽度: ' + $('#element1').css('width'));
});
$('#setRedBg').click(function() {
$('#element1').css('background-color', 'red');
});
$('#setMultiStyles').click(function() {
$('#element1').css({
'background-color': 'lightblue',
'border': '3px solid darkblue',
'color': 'white',
'font-weight': 'bold'
});
});
$('#resetStyles1').click(function() {
$('#element1').css({
'background-color': '#e0e0e0',
'border': '2px solid #999',
'color': 'inherit',
'font-weight': 'normal'
});
});
// 第二部分：尺寸相关方法
$('#getDimensions').click(function() {
let html = '宽度: ' + $('#element2').width() + '<br>';
html += '高度: ' + $('#element2').height() + '<br>';
html += 'innerWidth: ' + $('#element2').innerWidth() + '<br>';
html += 'outerWidth: ' + $('#element2').outerWidth() + '<br>';
html += 'outerWidth(true): ' + $('#element2').outerWidth(true);
$('#element2').html(html);
});
$('#setDimensions').click(function() {
$('#element2').width(300).height(150);
});
$('#resetDimensions').click(function() {
$('#element2').width(200).height(100).html('目标元素 #2');
});
// 第三部分：位置相关方法
$('#getPosition').click(function() {
let offset = $('#element3').offset();
let position = $('#element3').position();
let html = 'offset: top=' + offset.top + ', left=' + offset.left + '<br>';
html += 'position: top=' + position.top + ', left=' + position.left;
$('#element3').html(html);
});
$('#setOffset').click(function() {
$('#element3').offset({ top: 50, left: 100 });
});
$('#resetPosition').click(function() {
$('#element3').offset({ top: 20, left: 30 }).html('目标元素 #3');
});
// 第四部分：类操作相关方法
$('#addHighlight').click(function() {
$('#element4').addClass('highlight');
});
$('#removeHighlight').click(function() {
$('#element4').removeClass('highlight');
});
$('#toggleHighlight').click(function() {
$('#element4').toggleClass('highlight');
});
$('#checkHighlight').click(function() {
if ($('#element4').hasClass('highlight')) {
alert('元素有 highlight 类');
} else {
alert('元素没有 highlight 类');
}
});
// 第五部分：显示/隐藏相关方法
$('#showElement').click(function() {
$('#element5').show();
});
$('#hideElement').click(function() {
$('#element5').hide();
});
$('#toggleElement').click(function() {
$('#element5').toggle();
});
$('#fadeToggle').click(function() {
$('#element5').fadeToggle(500);
});
$('#slideToggle').click(function() {
$('#element5').slideToggle(500);
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
