insertRule() 方法帮助我们在样式表中定义位置添加规则，而 deleteRule() 方法删除网页上的特定样式。以下示例演示了可以使用 JavaScript 向样式表添加的 CSS 规则。插入规则 要在定义的位置插入规则，请使用 insertRule() 方法。还设置了边距、填充和阴影。首先，使用 getElementById() 设置自定义 ID − let newSheet = document.getElementById('custom').sheet let cs = 'p {'; cs += 'margin: 4%;'; cs += 'padding: 2%;'; cs += 'font-size: 22px;'; cs += 'box-shadow: ... 阅读更多

要返回元素的高度、可滚动高度、包含填充、边框和滚动条的高度，请使用以下属性；clientHeight − clientHeight 给出包含填充的元素高度的度量。请注意，边框、边距和滚动条高度（如果呈现）不包含在此内。offsetHeight − offsetHeight 给出包含垂直填充、顶部和底部边框的元素高度的度量。此处不包括边距。scrollHeight − scrollHeight 给出包含垂直填充和在... 阅读更多

使用 JavaScript，我们可以设置 TextArea 元素使其内容自动增长。以下示例说明了如何实现上述方案。假设以下是在添加内容之前的 TextArea − 以下是在添加内容之后的 TextArea − 以下是在添加更多内容后自动增长的同一 TextArea − 自动扩展文本区域示例 让我们看看如何自动扩展文本区域 − * { ... 阅读更多

通过将 html 和 body 的大小设置为 100%，可以创建一个具有灵活侧边栏和主内容区域的网页。以下示例对此进行了说明。示例 实时演示 html,body { height: 100%; color: white; font-size: 2em; line-height: 200px; } #parent { display: table; width: 100%; height: 100%; } #side { display: table-cell; background-color: turquoise; width: 20%; vertical-align: top; box-shadow: inset 0 0 10px black; } #main { display: table-cell; width: 80%; background: url("https://images.unsplash.com/photo-1611944444060- b50a1d80cfe6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600"); } 侧边栏 主内容 输出 这将产生以下结果 −

可以通过将高度设置为 100% 并应用元素的正确定位来创建具有固定侧边栏和可滚动内容区域的全高页面。以下示例说明了上述内容。示例 实时演示 .main { margin-left: 140px; font-size: 200%; padding: 0 3%; } section { height: 400px; background-color: tomato; } .sidebar { height: 100%; width: 140px; top: 0; left: 0; position: fixed; background-color: darkslategrey; padding-top: 20px; } .sidebar a { display: block; padding: 2% 4%; text-decoration: none; color: lightblue; font-size: 1.4em; ... 阅读更多

借助 CSS 动画，我们可以使用 JavaScript 创建打字机打字和删除效果。还设置了无限效果。自定义函数将被调用，并且单词将以效果显示。最后，这些单词将使用另一个自定义函数删除。设置文本和光标的 div 首先，使用该元素设置父 div 容器。其中一个将有文本，另一个将有光标 L | 样式元素 专业字体为 ... 阅读更多

CSS caret-color、pointer-events 和 tab-size 是一些鲜为人知的表单输入字段属性。caret-color 属性允许我们指定闪烁光标的颜色，而 pointer-events 可以帮助防止用户找到元素。最后，tab-size 设置制表符使用的空格量。以下示例说明了其中一些属性。tab-size 属性 CSS tab-size 属性允许我们设置制表符中使用的空格量。制表符字符的宽度可以轻松自定义。tab 大小设置的值以空格为单位。让我们看看语法。tab-size: value; ... 阅读更多

通过为背景和前景内容指定不同的速度，我们可以使用 CSS 创建视差滚动效果。向上和向下滚动时，您可以轻松注意到差异，大多数情况下，您可以在网站的首页找到这种效果。设置图像 首先，使用 background-image 属性放置图像。使用 url，将源自背景图像的链接 − background-image: url("https://tutorialspoint.com/static/images/home/coding-groundhero.svg"); 设置高度 您需要使用 min-height 属性设置最小高度 − min-height: 500px; 创建视差滚动效果 可以设置视差滚动效果 ... 阅读更多

使用 position 属性可以将固定导航栏固定在网页上，即使滚动时它也保持不变。它会粘在顶部。如今，许多网站的导航栏都固定在顶部。top 属性也用于此。通过指定 CSS position 属性，我们可以使用 CSS 创建固定导航栏。CSS 中 position 属性的语法如下 − 选择器 { position: /*值*/；} 在上面，position 属性的值被设置为 fixed 以设置固定导航栏。设置容器 ... 阅读更多

通过对具有 sticky 位置的元素应用各种 CSS 样式，我们可以轻松检测元素何时固定。设置粘性导航栏 Div 创建 div 并设置导航栏 − 观看我！设置顶部导航栏的样式 设置将固定在网页上的顶部导航栏的高度 − #navbar-top { background-color: lightgrey; height: 2px; } 设置具有固定位置的容器 div 这将显示检测结果 − #container { position: sticky; top: ... 阅读更多