看了几个，看着看着就放弃了，太难了{:5_117:}
竹溪 发表于 2024-8-19 08:41
看了几个，看着看着就放弃了，太难了
0基础的话会有些难度
马黑黑 发表于 2024-8-19 18:34
0基础的话会有些难度
不是有些难度，是有很多难度。
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.textMid { text-align: center; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第二十五讲：学一点点JS（五）JS操作CSS属性和HTML属性</h2>
<p>CSS属性服务于HTML标签，亦即，选择器里面的每一个属性都是在描述对应HTML标签的对应样式，比如说 width 属性定义的是元素的宽度，以键值对的方式进行设定，<mark>width: 400px;</mark> 表示，元素的宽度为400个像素。这一点从前面的课程中应该已经有印象，我们再举例说明以明晰相关概念——主要是理解并能分辨CSS属性和HTML属性，以便学习和掌握JS对不同类型属性的具体操作。试看以下CSS样式+HTML标签的代码结构：</p>
<div class="hE"><pre>
<style>
.tzbox {
width: 400px;
height: 200px;
border: 1px solid gray;
padding: 10px;
}
</style>
<div class="tzbox"></div>
</pre></div>
<p><style> ... </style> 包裹其中的是CSS代码，亦即，style 是一个CSS标签，它表明它连同它里面的代码是web页中的CSS代码。上例CSS代码中，我们创建了一个class选择器名为 <span class="textRed">tzbox</span>，名称之前的 <mark>.</mark> 号表示这是一个 <span class="textRed">class</span> 选择器，写成 <mark>.tzbox</mark>。然后，用花括号 <mark>{}</mark> 将需要的CSS属性一个一个地表达出来：width、height 属性分别是将来使用这个选择器的元素的宽与高，border 是边框，padding 是内边距，这些，称为CSS属性，属性名之后用冒号带出属性值，这叫键值对；可以一行写一个键值对即属性和属性值，写完属性值要用小角分号 <mark>;</mark> 收尾，各个语句也可以连在一起写，每句结束必须使用小角分号 <mark>;</mark> 收尾。每一行（个）键值对代码都是描述HTML标签的样子，只要该标签带有 class="tzbox" 就按 .tzbox 选择器所描述的样子出现在页面中；这叫绑定：将HTML标签和CSS选择器进行捆绑，id="xxx" 或 class="xxx" 就是通过id或class绑定标签和选择器；绑定还有直接的方式，例如CSS的元素选择器，像 <mark>p {...} </mark> 就直接绑定了p标签，无需在p标签中带上属性名。</p>
<p>代码中的最后一行是一个 div 标签，是HTML代码，该 div 标签有 class="tzbox" 属性和属性值，等号左边是属性名、右边是属性值，此属性是 HTML 属性，称为标签或元素即例中的 div 的 class属性，class属性指该标签的类名，也就是一类通过 class 属性表明自己绑定了CSS类选择器的元素。不止一个标签可以绑定CSS类选择器，但若使用的是 id，比如 id="abox"，则同一页里只能有一个标签这么做，这个 id，对于HTML标签而言是元素的HTML id属性，对于CSS而言则是 id 选择器，和 class 选择器一样，其下的花括号里是一个或多个CSS属性设置。</p>
<p>至此，我们应该理解：CSS属性存在于CSS代码中，它们描述诸如元素宽度、边框、定位等，存在方式是 <mark>健名: 键值;</mark>。CSS属性还可以以 <mark>style="健名1:键值;健名2:键值;健名N:键值;"</mark> 的方式存在，style作为一个HTML属性用以存储CSS代码；HTML属性是HTML代码中以等号的形式将属性和属性值建立起关系，例如 <mark>width="600"</mark> 可以用来表示图片标签的宽度，等号前的是属性名，等号后面的是属性值，属性值一般要用小角引号包裹，里面不能有px等单位。</p>
<p>不同的HTML标签可以在HTML代码中带有不同的HTML属性，我们举几个例子并在代码后面加以简单说明：</p>
<div class="hE"><pre>
<div class="tbox" style="color: red;"></div>
<img id="mypic" src="图片地址" width="400" height="360" alt="" title="我的图片" />
<video id="vid" src="MP4地址" autoplay="true" loop="true"></video>
<input id="mybutton" type="button" value="点我登录" />
<button id="bnt333" type="button" value="333">点击这里提交资料</button>
</pre></div>
<p>这些标签，有些属性是必须的，比如图片的 src 和 alt 属性不能缺，有些是可以不要的，比如 div 使用style属性设置CSS样式更倾向于在对应CSS选择器中进行设置，有些根据情况决定，比如id属性和class属性是否同时设置依据的是该标签是否还需要对应的CSS class选择器来补充设置它的样式或是否需要id属性便于后续的JS对它进行操作。HTML属性和CSS属性都是用来设置HTML标签的样式，但除开必不可少的属性和CSS没有的属性外，HTML属性能不用就不用，就是说，能用CSS属性的尽量用CSS来设置，不能的才用HTML属性——例如 src、autoplay、loop、muted 等这些基于媒体标签的HTML属性。</p>
<p>HTML属性和CSS属性都是用来设置HTML标签，JS对它们的操作方法却不一样。规则是，对于HTML标签代码中出现的HTML属性，直接使用 <mark>元素.属性名</mark> 操作，对于style标签里各选择器的CSS属性，则要有 style 关键字，style 表示的就是CSS代码的标签，使用 <mark>元素.style.属性名</mark> 操作就是操作元素绑定的CSS选择器中的属性。试看如下例子的JS代码，两个按钮的点击事件分别操作id="divbox1"元素的HTML属性即 title 属性和CSS属性即 height 属性：</p>
<div class="hE"><pre id="pre1">
<style>
#divbox1 {
width: 400px;
height: 100px;
border: 1px solid gray;
padding: 10px;
}
</style>
<div id="divbox1">点击下方第一个按钮前、后请将鼠标移动我这里<br>点击第二个按钮前、后注意观察我的高度</div>
<p><input id="btn251" type="button" value="设置div的title属性（HTML属性）" /></p>
<p><input id="btn252" type="button" value="设置div的height属性（CSS属性）" /></p>
<script>
btn251.onclick = () => divbox1.title = '我是一个 DIV\n我很酷';
btn252.onclick = () => divbox1.style.height = '200px';
</script>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>很多时候我们可能不得不操作一系列的CSS属性，JS早就支持这一需求，它提供了一个基于 style 的属性关键字 <span class="textRed">cssText</span>，字面意是CSS文本，它可以帮助我们像写CSS代码那样在JS中动态设置元素的CSS属性。下面的例子要解决的问题是，给一个没有制定CSS样式的div临时设置CSS样式，演示后按提示点击相应的地方，div就得到美化：</p>
<div class="hE"><pre id="pre2">
<div id="divbox2">点击这里给我化妆</div>
<script>
divbox2.onclick = () => {
divbox2.style.cssText = `
width: 600px;
height: 200px;
font-size: 2rem;
text-shadow: 1px 1px 2px gray;
background: lightblue;
border: 2px solid #${Math.random().toString(16).substring(2,8)};
padding: 10px;
`;
divbox2.innerText = '感谢你美容师！祝你和我一样漂亮！';
};
</script>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>上面的演示可以反复点击div，不过后续的动态变化的仅有div的边框颜色。边框的颜色设置也是例子代码中唯一不同于CSS属性设置的地方，border属性中的颜色设置，使用了一个JS语句 <mark>${Math.random().toString(16).substring(2,8)}</mark>，这是一个链式语句，其意为，随机数 Math.random() 所得结果转变为十六进制字符串，toString(16)，再从十六进制字符串的第3个字符串开始截取单个字符，总共截取六个字符，代码 substring(2,8) 的参数中，2对应于字符串的第3个字符，8表示截取到原字符串的第8位字符（字符从0起算，0代表第一个字符）。JS写CSS属性妙就妙在以JS的方式支持动态变化，此方式体现在字符与JS语句的拼接，使用的是 <mark>${JS语句}</mark> 这样的方式，前提是反引号——字符必须放在反引号 <mark>``</mark> 中才可以使用 <mark>{...}</mark> 以及变量值分行书写。反引号 <mark>``</mark> 和 小角引号 <mark>''</mark> 外观不一样，请观察比较。</p>
<p>而要改变元素的HTML属性，一般就只能一个一个属性地操作，好在普通元素的HTML属性并不多，特殊的标签，如 img（图片）、audio（音频）、video（视频）、input（表单相关）、button（按钮）等则有各自的特定HTML属性，这需要熟悉这些特定标签的HTML属性到底都有哪些，需要时可以查查资料。</p>
<p>除了元素的CSS属性和HTML属性，HTML元素还事实存在JS属性，尽管术语并没有JS属性这个概念。实际上，JS为不同的元素都是封装有相应的JS属性，有些属性是可读写的，例如div等元素的innerHTML、innerText、textContent，有些JS属性是只读的，例如音画帖经常用到的音频 audio 标签——它的一个重要的JS属性 paused 就是判断音频控件暂停中的依据，我们音画帖中的联动函数就依靠这个只读属性的值去动态地管控CSS关键帧动画、视频等工作，大家可以回头看看相关教程。而对于一些特定控件，JS还提供了可操控的方法，例如 audio 标签的 play() 播放方法、pause() 暂停方法等等。这里进一步解释一下JS属性和方法的异同：JS属性用来表明元素的状态，比如 audio.paused 返回两种可能的值 true 或 false 表明音频的暂停状态为真或为假；JS方法用来驱动元素对交互的相应，例如，audio.play() 和 audio.pause() 分别用来命令音频控件播放和暂停，方法如同函数，所以命令关键字的后面都会紧跟着小括号，有时括号里还可以带参数。</p>
<p><mark>css+html+js</mark>是web页的有机组合，JS主要负责实现交互、动态等功能，因此，JS能操作CSS属性、HTML属性是理所当然的，特定元素另外附有特定的JS属性和JS方法也不足为奇，是HTML早已封装好的元素预设集成的相关接口，留待JS等脚本语言去使用，我们要做的是尽可能去熟悉不同HTML标签的这些属性和方法，实在记不了那么多也没关系，使用的时候查查资料。</p>
<p><strong>作业一</strong>：有一个元素，部分代码如下所示，它已经拥有CSS样式，但我们还希望在交互时它能动态地产生一些变化，具体是，设备指针（pointer）移入元素界面时前景色是红色、背景色是浅绿色，移出时前景色是黑色、背景色是浅蓝色。CSS+HTML代码如下，JS部分是作业内容。</p>
<div class="hE"><pre>
<style>
#divbox3 {
width: 600px;
height: 200px;
font-size: 2rem;
text-shadow: 1px 1px 2px gray;
background: lightblue;
border: 2px solid gray;
padding: 10px;
}
</style>
<div id="divbox3">请将设备指针移入、移出查看效果</div>
</pre></div>
<p>提示：① 设备指针和鼠标指针很相似，兼容鼠标指针，onpointerover 监听事件、onpointerout 监听事件和 onmouseover、onmouseout使用方法一样，作业请使用 pointer 相关监听事件完成；② 指针移入 onpointerover 和 指针移出各自操作 <mark>元素.style.*</mark> 属性以改变元素的前景色和背景色，可以考虑 元素.style.CSS属性 或 元素.style.cssText 完成，如果使用cssText，因为元素已有CSS属性，建议使用 <mark>+=</mark> 符号给元素赋值，它表示在原基础上再加这个（些）属性和属性值。</p>
<p><strong>作业二</strong>：同样使用上述代码结构，请通过纯CSS方式实现作业一JS能实现的功能。提示：本作业不使用JS，仅需给 CSS 加一个伪类选择器。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
27将准备上线，这里没有准备好
黑黑，我发现我看你的代码都是重复的，是不是我的浏览器原因？
马黑黑 发表于 2024-8-25 10:46
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
https://pic.imgdb.cn/item/66cf3201d9c307b7e9debaa0.png
马黑黑 发表于 2024-8-12 07:35
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
https://pic.imgdb.cn/item/66cf3296d9c307b7e9df9394.png
换个浏览器测试一下也是一样
手机可以，但手机我不看，怕伤眼睛
看看可以不可以翻页
小辣椒 发表于 2024-8-28 22:23
换个浏览器测试一下也是一样
刷新一下看看
马黑黑 发表于 2024-8-28 22:47
刷新一下看看
去了缓存，重新刷新还是一样的
小辣椒 发表于 2024-8-28 22:50
去了缓存，重新刷新还是一样的
你到底什么浏览器呀
马黑黑 发表于 2024-8-8 21:22
你手机的浏览器版本低下。你可以考虑安装一个浏览器，比如Edge
升级了也没用，手机上还能按这个浏览器啊
马黑黑 发表于 2024-8-29 07:57
你到底什么浏览器呀
QQ浏览器和百分百浏览器
小辣椒 发表于 2024-8-29 21:29
QQ浏览器和百分百浏览器
更新一下
绿叶清舟 发表于 2024-8-29 21:28
升级了也没用，手机上还能按这个浏览器啊
安装什么都可以
马黑黑 发表于 2024-8-29 21:41
更新一下
QQ浏览器刚更新过的
小辣椒 发表于 2024-8-29 21:42
QQ浏览器刚更新过的
QQ浏览器没用过，看过评测，都说是垃圾