更改类选择的元素的 CSS答案

【问题标题】：Change CSS of element selected by class更改类选择的元素的 CSS
【发布时间】：2017-03-25 00:55:50
【问题描述】：

我有一些代码来检查网站的 URL 是否是特定的品牌名称，然后根据品牌更改 CSS 样式的颜色。这是我到目前为止所得到的：

<?php
$URL = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
if (strpos($URL, 'brandName') !== false){
    echo "<script>
        jQuery( document ).ready( function () {
            var navbar = document.getElementsByClassName('navbar-default');
              for(i=0; i<navbar.length; i++) {
                navbar[i].style.border-bottom = '#ff6600 solid 5px';
              } 
        } );
    </script>";
}
?>

我不断收到错误：

Uncaught ReferenceError: Invalid left-hand side in assignment

我不太确定出了什么问题。

【问题讨论】：

border-bottom 不是有效的 JS 对象属性标识符。您使用 borderBottom 代替 CSS 属性。
...更好地使用类来更新样式，IMO。 CSS：.someClass{border-bottom: #ff6600 solid 5px} ...JS：navbar[i].classList.add("someClass")
如果您已经在使用 jQuery，那么为什么不使用 jQuery 选择器和 .css 呢？例如$(".navbar-default").each(function() { $(this).css({"border-bottom" : "5px solid #f60"}) });
谢谢斜视。永远不会注意到边框底部的东西。不知道不一样。 @CD001 - 我正在查找其他人构建的代码，这似乎更快更容易，谢谢，我会切换到您提供的代码。

标签： javascript php css

【解决方案1】：

只是为了整洁 - 假设这是在“视图”类型的文件中。如果你在进入 JS 之前突破 PHP，阅读起来会容易得多：

<?php if(strpos($_SERVER['REQUEST_URI'], 'brandName') !== false): ?>
<script>
$(document).ready(function() {
    $(".navbar-default").each(
        $(this).css({"border-bottom" : "5px solid #f60"});
    );
});
</script>
<?php endif; ?>

PHP 为模板提供了一种替代的<?php if(): ?> ... <?php endif: ?> 语法。

【讨论】：