相关疑难解决方法(0)

我想在我的DOM中动态设置给定选择器的所有元素.我或多或少地看到了两种方式.对于下面的例子,我将使用一个p元素及其text-align属性,但我对这两种可能的方法的优缺点比我特别是文本对齐段落更有兴趣.

1.内联(每个元素)样式

var nodes = document.getElementsByTagName('p');
Array.prototype.forEach.call (nodes, function (node) {
     node.style.textAlign = "center";
});

2.样式表

var sheet = (function() {
  // Create the <style> tag
  var style = document.createElement("style");

  // WebKit hack :(
  style.appendChild(document.createTextNode(""));

  // Add the <style> element to the page
  document.head.appendChild(style);

  return style.sheet;
})();

sheet.insertRule("p { text-align: center; }");

通常我会选择内联样式的路线,因为它看起来更简单,并确保样式更改将覆盖现有的样式表.但是对于我来说,有一种情况:有时不会覆盖样式表可能更可取,对于两个:修改一个style元素可能比未知数量的p元素更高效.但这只是我的假设.

性能方面,是否会出现这样的情况:将内联样式应用于每个单独的元素会比创建样式表更好？假设答案可能取决于我造型的元素数量,那么创建样式表会变得更有效吗？

编辑:为了澄清我为什么问这个问题,我会解释一下我为什么要问:我最近把一些JS黑客经常复制粘贴并在项目之间改编成一组可重复使用的CommonJS模块.在最大或最宽的度量可能会在窗口调整大小或其他触发器上发生变化的情况下,它们会执行诸如将给定选择器的所有元素设置为与最高或最宽集相同的高度或宽度的操作.

这是一篇关于它的博客文章:http://davejtoews.com/blog/post/javascript-layout-hacks

以下是模块的GitHub存储库:

• 同样的高度
• 相同的宽度
• 与双方对齐
• 布局队列

此时,所有这些模块都使用内联样式,但我正在考虑将它们切换到样式表.我无法找到关于任何一种方法的利弊的好答案,所以我在这里发布了这个问题.

我在使用 React 制作网站时发现了一些奇怪的问题。

我已将我的文件系统组织到一个包含 Components-js 和 Components-css 的文件夹中，并与相应的 Text.js 和 Text.css 文件进行匹配。

下面是我的 Login.js/css 和 Signup.js/css 文件。

登录.js

import '../components-css/Login.css';
import Logo from './Logo.js';
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import TextInput from './TextInput.js';


function Login(props) {

    const [error, setError] = useState(false);

    const navigate = useNavigate();

    const trigger_error = () => {
        console.log(error)

        if (error === false) {
            setError(true);
        }
        else {
            setError(false);
        }
    }


    const check_login_info = () => {
        // TODO: …