为什么 CSS/Javascript 和 HTML 只会传递一些属性，而不是全部？

Question

我已经下载了一个隐藏搜索栏的源代码，当点击它时，会显示一个文本输入栏。

我已将此 html 复制到我的 homepage.html:

<div id="reserveButtonOuter">
  <button id="reserveButton">Reserve a Table</button>
</div>

<div id="sb-search" class="sb-search">
  <form>
    <input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
    <input class="sb-search-submit" type="submit" value="">
    <span class="sb-icon-search"></span>
  </form>
</div>

这已连接到我的HomePage.js 文件，其中我有以下代码：

;( function( window ) {

    function UISearch( el, options ) {  
      this.el = el;
      this.inputEl = el.querySelector( 'form > input.sb-search-input' );
      this._initEvents();
    }

    UISearch.prototype = {
      _initEvents : function() {
        var self = this,
          initSearchFn = function( ev ) {
            if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
              ev.preventDefault();
              self.open();
            }
            else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
              self.close();
            }
          }

        this.el.addEventListener( 'click', initSearchFn );
        this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
      },
      open : function() {
        classie.add( this.el, 'sb-search-open' );
      },
      close : function() {
        classie.remove( this.el, 'sb-search-open' );
      }
    }

这只是代码的一小部分，因为它有几百行。 .css 文件很好地链接到我的页面，因为它适用于我的其他元素。搜索栏仅呈现为橙色方块，单击时不会在控制台上显示任何错误。我不确定这对 Javascript 意味着什么？

任何建议都会很棒，谢谢！

Answer 1

我对您的建议是在开发人员工具中检查元素上强制执行的 css。 也许您正在加载一些具有更高优先级的值，或者您的选择器不正确，或者您可能在 css 加载之前抛出了 js 异常..