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-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 属性的值被固定以设置固定导航栏。设置容器... 阅读更多

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