Fatal编程技术网
  • javascript/
  • Can'；不要通过Javascript将样式应用于HTML元素

Can'；不要通过Javascript将样式应用于HTML元素

javascript html css bootstrap-4

Can'；不要通过Javascript将样式应用于HTML元素,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我对Javascript非常陌生，我正在构建一个网页，希望当用户向下滚动时导航栏可以改变大小。这只能通过使用Javascript实现 我在HTML文件中引用了.js文件，并使用Javascript文件中定义的函数向导航栏添加了一个onscroll事件。问题是，这种样式不适用。我已经通过添加一个console.log（）；，检查了该函数是否实际被调用；。我发现函数正在被调用，但由于某些原因，样式将不适用 这是我的HTML <!doctype html> <html lang="{

我对Javascript非常陌生，我正在构建一个网页，希望当用户向下滚动时导航栏可以改变大小。这只能通过使用Javascript实现

我在HTML文件中引用了.js文件，并使用Javascript文件中定义的函数向导航栏添加了一个onscroll事件。问题是，这种样式不适用。我已经通过添加一个console.log（）；，检查了该函数是否实际被调用；。我发现函数正在被调用，但由于某些原因，样式将不适用

这是我的HTML

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Remote Homework') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- Stylesheet from initial build, located in public folder -->
    <link rel="stylesheet" href="{{ asset('style.css') }}" type="text/css">


</head>
<body>
    <div id="app">
        <nav id="navbar" onscroll="navbarSizing()" class="navbar navbar-expand-md navbar-light bg-white shadow-sm sticky-top">
            <!-- Use container-fluid to arrange navbar items from edge to edge -->
            <div class="container">
                <a class="navbar-brand" href="{{ route('home') }}#content1">
                    <img src="{{ asset('images/better_logo.png') }}" alt="Logo" style="width:105px;">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}#content1">{{ __('Home') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}#content2">{{ __('Info') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}#content3">{{ __('Contact') }}</a>
                        </li>
                        @auth()




                        @endauth
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        <!-- only gets called when user is logged in -->
                        @else
                            <li class="nav-item">
                                <!-- put the route for the 'public' questions here-->
                                <a href="{{ route('questions.feed') }}" class="nav-link">Question Feed</a>
                            </li>

                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">

                                    <a class="dropdown-item" href="{{ route('questions.overview') }}">{{ __('My questions') }}</a>
                                    <!--<a class="dropdown-item" href="{{ route('pages.dashboard') }}">{{ __('Dashboard') }}</a>-->
                                    <a class="dropdown-item" href="{{ route('questions.create') }}">{{ __('Ask a question') }}</a>

                                    <hr class="dropdownmenu-hr">

                                    <a class="dropdown-item"
                                       href="{{ route('logout') }}"
                                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                                    >
                                        {{ __('Logout') }}
                                    </a>



                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            <!-- main content of the page -->
            @yield('content')
        </main>
        <!-- the footer of the page -->
        @include('pages.footer')
    </div>
    <script src="index.js"></script>
</body>
</html>
有人能看到问题吗？这个问题我已经纠缠了好几个小时了。提前谢谢

如果要更改元素的css，请使用jQuery。下面是使用jQuery更改css的简单示例。我希望这有助于回答你或给你一个想法

function navbarSizing() {
    let element = $("#navbar").find('ul');
    element.css('background-color', 'red');
    console.log("This works!");
}
在本例中，它正在更改背景色。因此，首先您必须找到正确的元素来应用css。因此，如果要更改li的文本颜色，那么首先需要找到ul元素的li子元素

有关更多参考，您可以从中读取文档。另外，在html中包括jQuery作为

如果要更改元素的css，请使用jQuery。下面是使用jQuery更改css的简单示例。我希望这有助于回答你或给你一个想法

function navbarSizing() {
    let element = $("#navbar").find('ul');
    element.css('background-color', 'red');
    console.log("This works!");
}
在本例中，它正在更改背景色。因此，首先您必须找到正确的元素来应用css。因此，如果要更改li的文本颜色，那么首先需要找到ul元素的li子元素

有关更多参考，您可以从中读取文档。另外，在html中包括jQuery作为

第一个问题是，由于
nav
没有滚动条，因此它在滚动时不会获取事件。尝试在
body
元素上添加事件处理程序

其次，您正在应用的样式
color
在nav元素中不可见，因为它应用于文本颜色，并且
nav
元素没有任何文本，它包含其他元素。正如您所说的要更改大小，请尝试，例如：

element.style.height = "500px";
第一个问题是，由于
nav
没有滚动条，所以它在滚动时不会获取事件。尝试在
body
元素上添加事件处理程序

其次，您正在应用的样式
color
在nav元素中不可见，因为它应用于文本颜色，并且
nav
元素没有任何文本，它包含其他元素。正如您所说的要更改大小，请尝试，例如：

element.style.height = "500px";
嗯，导航栏真的可以滚动吗？从@epascarello说的开始，你实际上并没有滚动导航栏。您希望响应正在滚动的页面，而不是导航栏。尝试将onscroll事件移动到应用程序div或body标记，具体取决于您的样式。我明白您的观点。我已经尝试将onscroll事件更改为onclick事件，以检查它是否会产生影响。当我检查控制台时，实际上显示了调试消息，但我的样式不适用。我现在尝试将onscroll事件应用于父级，但由于某些原因，当我滚动时它不起作用。再一次，我对Javascript非常不熟悉。我现在将onscroll事件添加到标记中。该函数似乎被正确调用，因为我的调试消息正在控制台中显示。但是样式仍然不适用。嗯，导航栏真的可以滚动吗？从@epascarello所说的开始，你实际上没有滚动导航栏。您希望响应正在滚动的页面，而不是导航栏。尝试将onscroll事件移动到应用程序div或body标记，具体取决于您的样式。我明白您的观点。我已经尝试将onscroll事件更改为onclick事件，以检查它是否会产生影响。当我检查控制台时，实际上显示了调试消息，但我的样式不适用。我现在尝试将onscroll事件应用于父级，但由于某些原因，当我滚动时它不起作用。再一次，我对Javascript非常不熟悉。我现在将onscroll事件添加到标记中。该函数似乎被正确调用，因为我的调试消息正在控制台中显示。但是样式仍然不适用。这就成功了。这么明显的解决办法！非常感谢你！这就成功了。这么明显的解决办法！非常感谢你！