15个非JavaScript的高级 Web开发技巧

<p id="responsiveText">This is some text</p>
<script>  const screenWidth = window.innerWidth;  const baseFontSize = (screenWidth > 768) ? '20px' : '16px';  document.getElementById('responsiveText').style.fontSize = baseFontSize;</script>

:root {  --base-font-size: 16px;}p {  font-size: clamp(var(--base-font-size), 5vw, var(--base-font-size * 1.25));}

<label class="switch">  <input type="checkbox" onclick="toggleDarkMode()">  <span class="slider"></span></label>
<script>  function toggleDarkMode() {    document.body.classList.toggle('dark-mode');  }</script>

:root {  --background-color: #fff;  --text-color: #000;}@media (prefers-color-scheme: dark) {  :root {    --background-color: #333;    --text-color: #fff;  }}body {  background-color: var(--background-color);  color: var(--text-color);}

<div onmouseover="expandElement(this)" onmouseout="shrinkElement(this)">Hover me</div><script>  function expandElement(element) {    element.style.transform = 'scale(1.2)';  }  function shrinkElement(element) {    element.style.transform = 'scale(1)';  }</script>

div {  transition: transform 0.3s ease-in-out;}div:hover {  transform: scale(1.2);}

<input type="text" onfocus="animatePlaceholder(this)" onblur="resetPlaceholder(this)"><script>  function animatePlaceholder(input) {    input.placeholder = 'Type something...';  }function resetPlaceholder(input) {    input.placeholder = '';  }</script>

input::placeholder {  transition: all 0.3s ease-in-out;}input:focus::placeholder {  transform: translateY(-100%);  opacity: 0.7;}

<img data-src="image.jpg" alt="Lazy-loaded Image" id="lazyImage"><script>  document.addEventListener('DOMContentLoaded', function () {    const lazyImage = document.getElementById('lazyImage');    lazyImage.src = lazyImage.dataset.src;  });</script>

<img src="image.jpg" alt="Lazy-loaded Image" loading="lazy">

<div class="animate-me" onscroll="animateElement(this)">Scroll to animate</div><script>  function animateElement(element) {    // JavaScript animation logic    // ...  }</script>

.animate-me {  opacity: 0;  transition: opacity 0.5s;  scroll-margin-top: 20vh;}.animate-me.in-view {  opacity: 1;}

<input type="text" class="custom-input" onfocus="highlightInput(this)" onblur="resetInput(this)"><script>  function highlightInput(input) {    input.classList.add('focused');  }  function resetInput(input) {    input.classList.remove('focused');  }</script>

.custom-input {  border: 2px solid var(--input-border);}.custom-input:focus-within {  border: 2px solid var(--input-border-focused);}:root {  --input-border: #ccc;  --input-border-focused: #007bff;}

<input type="checkbox" id="menuToggle" onclick="toggleMenu()"><label for="menuToggle">Open Menu</label><script>  function toggleMenu() {    // JavaScript logic to toggle menu visibility    // ...  }</script>

#menuToggle {  display: none;}#menuToggle:checked + label {  /* Styles for open menu */}label {  cursor: pointer;}

<div class="gradient-border" onclick="toggleGradient()">Click to toggle gradient border</div><script>  function toggleGradient() {    // JavaScript logic to toggle gradient border    // ...  }</script>

.gradient-border {  border: 5px solid;  border-image: conic-gradient(from 0deg at 50% 50%, red, yellow, green, blue, purple);  border-image-slice: 1;}

<div class="multi-column" onclick="adjustColumns()">Click to adjust columns</div>
<script>  function adjustColumns() {    // JavaScript logic to adjust column layout    // ...  }</script>

.multi-column {  column-count: 3;  column-gap: 20px;}

<input type="checkbox" id="customCheckbox" onclick="toggleCheckbox()"><label for="customCheckbox" class="custom-checkbox"></label>
<script>  function toggleCheckbox() {    // JavaScript logic to toggle checkbox state    // ...  }</script>

input[type="checkbox"] {  display: none;}
input[type="checkbox"] + label {  width: 20px;  height: 20px;  background-color: #ccc;  display: inline-block;}
input[type="checkbox"]:checked + label {  background-color: #007bff;}

<a href="#about" onclick="scrollToSection('about')">About</a><script>  function scrollToSection(section) {    // JavaScript logic to scroll to the specified section    // ...  }</script>

body {  scroll-behavior: smooth;}

<div class="flex-container" onclick="adjustColumnHeights()">Click to adjust column heights</div><script>  function adjustColumnHeights() {    // JavaScript logic to equalize column heights    // ...  }</script>

.flex-container {  display: flex;}.flex-container > div {  flex: 1;}

<div class="gradient-text" onclick="toggleGradientText()">Click to toggle gradient text</div>
<script>  function toggleGradientText() {    // JavaScript logic to toggle gradient text    // ...  }</script>

.gradient-text {  background-clip: text;  color: transparent;  background-image: linear-gradient(to right, #ff8c00, #ffcd00);}

<div class="image-container">  <img src="image.jpg" alt="Overlay Image">  <div class="overlay-text" onclick="toggleOverlayText()">Click to toggle overlay text</div></div>
<script>  function toggleOverlayText() {    // JavaScript logic to toggle text overlay position    // ...  }</script>

.image-container {  position: relative;}.overlay-text {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}