document.addEventListener('click', function (e) { w = document.body.offsetWidth; if (w < 400) { card4.style.width = "75%"; card4.style.fontSize = "12px" card4.style.marginLeft = "25%" } else { card4.style.width = "50%"; card4.style.marginLeft = "50%" card4.style.fontSize = "16px" } });

时间: 2024-02-14 20:20:52 浏览: 59

document属性和方法.txt

### Document属性和方法详解 #### 一、Document对象概述 `Document`对象是浏览器中一个非常重要的对象，它表示整个HTML文档。通过`Document`对象，开发者可以访问页面中的所有元素，实现对网页内容的动态操作。下面将详细介绍`Document`的一些常用属性和方法。 #### 二、Document的基本属性 ##### 1. `document.title` 用于获取或设置HTML文档的标题，即`<title>`标签内的文本。 - **语法**： ```javascript document.title ``` - **示例**： ```javascript // 获取文档标题 var title = document.title; console.log(title); // 输出文档标题 // 设置文档标题 document.title = "新标题"; ``` ##### 2. `document.bgColor` 用于设置或返回文档的背景颜色。 - **语法**： ```javascript document.bgColor ``` - **示例**： ```javascript // 设置背景颜色 document.bgColor = "#FF0000"; // 红色 ``` ##### 3. `document.fgColor` 用于设置或返回文档的前景颜色（通常指文字的颜色）。 - **语法**： ```javascript document.fgColor ``` - **示例**： ```javascript // 设置文字颜色 document.fgColor = "#0000FF"; // 蓝色 ``` ##### 4. `document.linkColor` 用于设置或返回文档中未访问过的链接的颜色。 - **语法**： ```javascript document.linkColor ``` - **示例**： ```javascript // 设置链接颜色 document.linkColor = "#00FF00"; // 绿色 ``` ##### 5. `document.alinkColor` 用于设置或返回文档中活动链接的颜色（即鼠标悬停时链接的颜色）。 - **语法**： ```javascript document.alinkColor ``` - **示例**： ```javascript // 设置活动链接颜色 document.alinkColor = "#FF00FF"; // 紫色 ``` ##### 6. `document.vlinkColor` 用于设置或返回文档中已访问过的链接的颜色。 - **语法**： ```javascript document.vlinkColor ``` - **示例**： ```javascript // 设置已访问链接颜色 document.vlinkColor = "#00FFFF"; // 青色 ``` ##### 7. `document.URL` 返回当前文档的URL。 - **语法**： ```javascript document.URL ``` - **示例**： ```javascript // 获取文档URL var url = document.URL; console.log(url); ``` ##### 8. `document.fileCreatedDate` 返回文档创建日期的时间戳（只读）。 - **语法**： ```javascript document.fileCreatedDate ``` - **示例**： ```javascript // 获取文档创建时间 var createdDate = document.fileCreatedDate; console.log(createdDate); ``` ##### 9. `document.fileModifiedDate` 返回文档最后修改日期的时间戳（只读）。 - **语法**： ```javascript document.fileModifiedDate ``` - **示例**： ```javascript // 获取文档最后修改时间 var modifiedDate = document.fileModifiedDate; console.log(modifiedDate); ``` ##### 10. `document.charset` 返回文档的字符集编码。 - **语法**： ```javascript document.charset ``` - **示例**： ```javascript // 获取文档字符集 var charset = document.charset; console.log(charset); ``` ##### 11. `document.fileSize` 返回文档的大小（只读）。 - **语法**： ```javascript document.fileSize ``` - **示例**： ```javascript // 获取文档大小 var fileSize = document.fileSize; console.log(fileSize); ``` ##### 12. `document.cookie` 用于获取或设置文档的cookie。 - **语法**： ```javascript document.cookie ``` - **示例**： ```javascript // 设置cookie document.cookie = "username=John Doe; expires=Fri, 31 Dec 2022 23:59:59 GMT"; // 获取cookie var cookies = document.cookie; console.log(cookies); ``` #### 三、Document的方法 ##### 1. `document.write()` 用于在文档流中写入HTML元素或文本。 - **语法**： ```javascript document.write(content) ``` - **示例**： ```javascript // 在文档中写入内容 document.write("<h1>Hello World!</h1>"); ``` ##### 2. `document.createElement(Tag)` 用于创建一个新的HTML元素。 - **语法**： ```javascript document.createElement(Tag) ``` - **示例**： ```javascript // 创建一个段落元素 var p = document.createElement("p"); ``` ##### 3. `document.getElementById(ID)` 用于获取指定ID的元素。 - **语法**： ```javascript document.getElementById(ID) ``` - **示例**： ```javascript // 获取id为"myDiv"的元素 var div = document.getElementById("myDiv"); ``` ##### 4. `document.getElementsByName(Name)` 用于获取具有指定名称的所有元素。 - **语法**： ```javascript document.getElementsByName(Name) ``` - **示例**： ```javascript // 获取name为"example"的所有元素 var elements = document.getElementsByName("example"); ``` ##### 5. `document.body.appendChild(oTag)` 用于向文档的body元素添加新的子元素。 - **语法**： ```javascript document.body.appendChild(oTag) ``` - **示例**： ```javascript // 向body添加一个新的段落 var p = document.createElement("p"); p.innerHTML = "This is a new paragraph."; document.body.appendChild(p); ``` ##### 6. `document.body`属性这些属性用于获取或设置body元素的属性。 - **语法**： ```javascript document.body.[属性名] ``` - **示例**： ```javascript // 获取body的背景颜色 var bgColor = document.body.bgColor; // 设置body的文字颜色 document.body.text = "#FF00FF"; // 粉色 ``` ##### 7. `document.body.innerText` 用于获取或设置body元素的文本内容。 - **语法**： ```javascript document.body.innerText ``` - **示例**： ```javascript // 获取body的文本内容 var textContent = document.body.innerText; console.log(textContent); // 设置body的文本内容 document.body.innerText = "这是一个新文本。"; ``` ##### 8. `document.body.innerHTML` 用于获取或设置body元素的HTML内容。 - **语法**： ```javascript document.body.innerHTML ``` - **示例**： ```javascript // 获取body的HTML内容 var htmlContent = document.body.innerHTML; console.log(htmlContent); // 设置body的HTML内容 document.body.innerHTML = "<h1>这是一个新标题。</h1>"; ``` ##### 9. `document.body.onclick` 用于设置当用户点击body元素时触发的事件处理函数。 - **语法**： ```javascript document.body.onclick = func() ``` - **示例**： ```javascript // 设置点击事件处理函数 document.body.onclick = function() { alert("Body was clicked!"); }; ``` ##### 10. `document.body.onmouseover` 用于设置当用户的鼠标移动到body元素上时触发的事件处理函数。 - **语法**： ```javascript document.body.onmouseover = func() ``` - **示例**： ```javascript // 设置鼠标悬停事件处理函数 document.body.onmouseover = function() { console.log("Mouse over body."); }; ``` ##### 11. `document.body.onmouseout` 用于设置当用户的鼠标离开body元素时触发的事件处理函数。 - **语法**： ```javascript document.body.onmouseout = func() ``` - **示例**： ```javascript // 设置鼠标移出事件处理函数 document.body.onmouseout = function() { console.log("Mouse out of body."); }; ``` ##### 12. `location`对象 `location`对象提供有关当前URL的信息，并允许您改变当前URL。 - **语法**： ```javascript location.[属性名] ``` - **示例**： ```javascript // 获取当前页面的URL var url = document.location.href; console.log(url); // 重定向到新页面 document.location.href = "http://www.example.com"; ``` ##### 13. `document.selection` 用于获取文档中选定的内容。 - **语法**： ```javascript document.selection ``` - **示例**： ```javascript // 清除文档中选定的内容 document.selection.empty(); ``` ##### 14. `document.images` 用于获取文档中的所有图片元素。 - **语法**： ```javascript document.images ``` - **示例**： ```javascript // 获取文档中的第一个图片元素 var firstImage = document.images[0]; ``` 以上介绍了`Document`对象的一些基本属性和方法，开发者可以根据需要选择合适的属性和方法来实现对网页内容的动态控制。这些功能在开发交互式网页时非常有用。

这段代码是使用JavaScript为页面中的某个元素（可能是一个卡片）添加了一个点击事件监听器。当用户点击该元素时，这段代码会检查页面的宽度，如果宽度小于400像素，则该元素的宽度将被设置为75％，字体大小设置为12像素，并将其左边距设置为25％。如果页面宽度大于或等于400像素，则该元素的宽度将被设置为50％，左边距设置为50％，字体大小设置为16像素。这段代码的作用是根据页面宽度自适应调整元素的显示样式。

阅读全文

document.addEventListener('click', function (e) { w = document.body.offsetWidth; if (w < 400) { card4.style.width = "75%"; card4.style.fontSize = "12px" card4.style.marginLeft = "25%" } else { card4.style.width = "50%"; card4.style.marginLeft = "50%" card4.style.fontSize = "16px" } });

相关推荐

40行代码理解React.js组件化

JavaScript深入理解window.event事件

document.addEventListener使用介绍

document.body.scrollTop用法

dom-on:别名 DOM 节点的 .addEventListener() 到 .on()

window.addEventListener来解决让一个js事件执行多个函数

TypeError document.getElementById(...) is null错误原因

document.documentElement的一些使用技巧

document.getElementById为空或不是对象的解决方法

document.getElementById获取控件对象为空的解决方法

document.frames在非IE浏览器中的解决办法

用javascript实现jquery的document.ready功能的实现代码

jQuery之$(document).ready()使用介绍

JAVASCRIPT-DOCUMENT方法大全.pdf

讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

self.attachevent is not a function的解决方法

addEventListener 的用法示例介绍

attachEvent和addEventListener 使用方法

Three.js实现QGIS区域底图的加载方法

最新推荐

基于Flask，mysql slope one的图书推荐系统全部资料+详细文档.zip

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

流程控制与循环结构详解：J750编程逻辑构建指南

python实现生成一个窗口，其窗口题目为“二冷配水模型模型”，窗口中包含八个输入栏，三个按钮，每个按钮点击后会产生一个不同的页面

MATLAB实现变邻域搜索算法源码解析

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序