代码之家 › 专栏 › 技术社区 › ProgrammingStudent

使用javascript更新ionic web应用程序中.pane和.view的背景色

ionic-framework angular css html javascript

1

ProgrammingStudent · 技术社区 · 2 年前

我正在尝试更新位于文件ionic.css中的两个名为.pane和.view的css选择器的背景色。然而,当我尝试这样做时,一切都没有改变。我可以直接转到ionic.css文件进行更改,但我想直接在index.html文件中使用javascript进行更改。我尝试过使用querySelectorAll(“.view”)和querySelectorAll(“.pane”),但当我检查NodeList的内容时,它是空的。index.html的代码如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }

    
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <!--<script src="cordova.js"></script>-->

    <!-- your app's js -->
    <script src="js/app_courses.js"></script>
    
    <script src="js/controllers_2_courses.js"></script>
      
        <script src="js/services_courses.js"></script>
     
  </head>

 <body ng-app="CITC">
    <ion-nav-view></ion-nav-view>

     <script> 

  // Get references to the elements
  const paneElements = document.querySelectorAll('.pane');
  const viewElements = document.querySelectorAll('.view');

  // Update the background color for each element
  paneElements.forEach((element) => {
    element.style.backgroundColor = '#111D12';
  });

  viewElements.forEach((element) => {
    element.style.backgroundColor = '#111D12'; 
  });

    </script> 

    
  </body>
</html>

1 回复 | 直到 2 年前

1

Naren Murali 2 年前

CSS总是按照定义的样式的顺序使用最后一个定义的样式,所以我们只需创建一个新的样式标记并以编程方式插入我们的CSS,它就会覆盖 ionic.css !

const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.pane, .view { background-color: #111D12; }';
const headTag = document.getElementsByTagName('head')[0];
headTag.appendChild(style);

这不是一种棱角分明的处理方式,但它仍然会得到你想要的!