From 44b6fcfd38e9ee649de6caef4872fe726949025b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8D=8E=E4=BC=9F?= <1931626338@qq.com> Date: Tue, 22 Nov 2022 23:00:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=80=89,=E5=8F=8D=E9=80=89=E6=93=8D;?= =?UTF-8?q?=E4=BD=9Cstyle=E6=A0=B7=E5=BC=8F;=E8=8E=B7=E5=8F=96=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E5=B1=9E=E6=80=A7=E7=9A=84=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\351\200\211\347\273\203\344\271\240.html" | 174 ++++++++++++++++++ .../\347\254\224\350\256\260/2022-11-21 .md" | 140 ++++++++++++++ 2 files changed, 314 insertions(+) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html" create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html" new file mode 100644 index 0000000..90de405 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html" @@ -0,0 +1,174 @@ + + + + + getElementsByTagName获取checkbox进行全选 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 全选 + 反选 + 姓名性别专业爱好
刘备软件开发抽烟
关羽国际贸易喝酒
张飞园林设计烫头发
赵云平面设计抽烟
黄忠影视制作玩游戏
小乔高级护理唱歌
+ + + + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" new file mode 100644 index 0000000..13c3339 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" @@ -0,0 +1,140 @@ +# 2022-11-21 + +## 全选&反选&操作style样式&获取设置属性的值 + +第一步:获取id(全选/反选)获取input(window.onclick =仅函数(事件)不起作用) + +```js + var sele=document.getElementById( 'selAll' ); //获取全选 + var clear=document.getElementById( 'fan' ); //获取反选 + var checked=document.getElementsByTagName( 'input' ); //获取input +``` + +第二步: 实现功能全选&反选 + +```js + +``` + +## 事件 + +### 事件三要素:事件源,事件类型,事件处理程序 + +```js + + +``` + +### 执行事件步骤: + +1.获取事件源 + +```js +var div =document.querySelector('div'); +``` + +2.绑定事件,注册事件 + +```js + div.onclick +``` + +3.添加事件处理程序 + +```js + div.onclick = function () { + console.log('选中了') + } +``` + +## 3.操作style样式 + +### 3.1 + +任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌style样式(直接定义在HTML元素上的style)。 + +对于使用短线分割的CSS属性,在JavaScript中转为驼峰式。 + +几个常见的属性: + +| CSS属性 | JavaScript属性 | +| ---------------- | --------------------- | +| background-image | style.backgroundImage | +| color | style.color | +| display | style.display | +| font-family | style.fontFamily | +| height | style.height | +| width | style.width | + +## 获取设置属性的值 + +### setAttribute + +- `元素.setAttribute('属性名',属性值)` +- 设置元素的行间属性,如果原来有这个行间属性会覆盖原来的行间属性 +- 可以通过该方法给元素新增自定义行间属性 + +例如: + +```js +var oBox = document.getElementById("box"); +oBox.setAttribute("width","200px");//给oBox对象新增行间属性width="200px",不能覆盖css样式中的width属性值 +oBox.setAttribute("class","myDiv");//给oBox对象新增行间属性class="myDiv" +``` + +### getAttribute + +- `元素.getAttribute('属性名')` +- 获取元素的行间属性对应的属性值,不能获取css样式对应的属性值 +- 如果获取的属性不存在返回null 例如: + +```js +var oBox = document.getElementById("box"); +console.log(oBox.getAttribute("width"));//null + + + + +

我是h2

+ + + +``` \ No newline at end of file -- Gitee