如何在JS插件中使值“从我的JS中获取”而不是默认的“从CSS中获取”？

时间：2019-04-03 10:32:02

标签： javascript jquery html css swiper

我使用swiper.js。
↑此链接是Github的swiper.js的JavaScript代码。

也许

if (swiper.isHorizontal()) {
if (swiper.isHorizontal()) {
  slides[i].style.width = slideSize + "px";
} else {
  slides[i].style.height = slideSize + "px";  // by this code in line 1413
}

// or

if (swiper.isHorizontal()) {
  $wrapperEl.css({
    width: ((swiper.virtualSize + params.spaceBetween) + "px")
  });
} else {
  // ↓ by this code in line 1460
  $wrapperEl.css({
    height: ((swiper.virtualSize + params.spaceBetween) + "px")
  });
}

现在默认情况下，滑动器的高度为“从CSS获取”，并以HTML编写style。

like this

但是我想在JS中设置高度，所以我希望高度是“从我设置的JS中获取”并用HTML编写style。

我在哪里以及如何编写和执行它？

我的代码

Fullscreen Fiddle
JSFiddle

↑代码段看起来有些奇怪并且很难看，因此请看一下JSFiddle。
↓此处的代码完全相同。 

/* height alignment ( I want to get the height set by this to the swiper ) */
$(function() {
  var maxh = 0;
  var conh = 'calc(100vh - 79px)';
  $(".left, .middle .right").each(function() {
    if ($(this).height() <= conh) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({
          'height': 'calc(' + conh + ' - 100px)',
          'justify-content': 'space-between'
        });
        $(".middle").css('height', conh);
      } else {
        maxh = $(".left, .right").height();
        $(".left, .middle .right").height(maxh);
      }
    }
  });
});

/* swiper */
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  autoHeight: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
  renderBullet: function(index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  },
});
html {
  font-size: 62.5%;
}

body {
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  max-height: 100vh;
  color: white;
  background-color: #c6d2dd;
}

.title {
  font-size: 1.4rem;
}

header {
  display: flex;
  position: fixed;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  z-index: 30;
  padding: 2.1rem 4.7rem 6rem 3.5rem;
}

header ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
  margin-bottom: -1px;
}

header li {
  font-size: 1.5rem;
  height: 4.5rem;
  padding-left: .4rem;
}

header li:first-child {
  padding-left: 1.5rem;
}

header li:last-child {
  padding-right: .5rem;
}

header li>a {
  text-decoration: none;
  display: block;
  padding: 1rem 2rem 1rem 3rem;
  margin-left: -1rem;
  height: 100%;
  color: #fff;
  outline: none;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
  position: relative;
  border-radius: 9px 5px 0 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}

header li>a:hover {
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

header li>a:hover::before {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}

header li>a::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: background-color 0.3s ease-in;
  transform: skew(-15deg);
  transform-origin: bottom right;
  border-radius: 5px 0 0 0;
}

.current a {
  border-right: 1px solid #fff;
  border-bottom-width: 0;
  pointer-events: none;
  margin-bottom: -3px;
}

.current a::before {
  border: 1px solid #fff;
  background-color: #9bacbb;
  margin: 0 0 -4px -1px;
}

.logo {
  margin-right: auto;
}

.mb {
  position: relative;
  padding-left: 4.1rem;
}

.mb a {
  display: block;
  height: 20px;
}

.mail {
  display: inline-block;
}

.balloon {
  display: none;
  position: absolute;
  padding-top: 2.5rem;
  right: -1.5rem;
}

.mb a:hover+.balloon {
  display: inline-block;
}


/* -----------------------------
 *     contents (from this)
 *----------------------------*/

.wrap {
  padding: 6.9rem 1rem 1rem 1rem;
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  width: 100%;
  height: calc(100vh - 7.9rem);
  background: #9bacbb;
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.5);
}

.swiper-wrapper {
  justify-content: space-between;
}

.swiper-slide {
  align-items: center;
}

#abme,
#abmm,
#abee {
  display: flex;
}

.left,
.right {
  margin: 5rem 0;
}


/*  left  */

.left {
  padding: 0 0 0 5.6rem;
  width: 33.5rem;
  display: flex;
  flex-direction: column;
}

.data {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}

.skill li {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.skill li :last-child {
  margin-right: 0;
}

.code {
  margin-top: 1.7rem;
}

figure {
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem;
  grid-row-gap: 0.5rem;
  margin-right: .9rem;
  font-size: 1rem;
}

figure img {
  grid-area: meter;
  align-self: center;
  justify-self: center;
}

figure .meter {
  width: 100%;
}

figure .meter-t {
  width: 50%;
  height: 50%;
}

figure figcaption {
  justify-self: center;
  min-width: 0;
}

.hobby>.data {
  padding-bottom: 0;
}


/*  midddle  */

.middle {
  display: flex;
  width: 55.2rem;
  flex-grow: 1;
  text-align: center;
  line-height: 0;
  margin-left: 3rem;
  margin-right: 3rem;
}

.middle img {
  flex: 0 1 auto;
  margin: auto;
}


/*  right  */

.right {
  display: flex;
  flex-direction: column;
  padding: 0 5.6rem 0 0;
  width: 31.1rem;
}

.attributes>p:last-child {
  padding-top: 0;
}

.live>.data {
  position: relative;
  padding: 0;
  width: 19.3rem;
  height: 20.2438rem;
}

.live>.data span {
  position: absolute;
  padding: 0;
  bottom: 30%;
  right: 7%;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0.2), 0 0 0 1.5rem rgba(255, 255, 255, 0.2), 0 0 0 3.5rem rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba(255, 255, 255, 0.2), 0 0 0 3.5rem rgba(255, 255, 255, 0.2), 0 0 0 8rem rgba(255, 255, 255, 0);
  }
}

.ripple {
  position: absolute;
  padding: 0;
  bottom: 43%;
  left: 44%;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: ripple 1.5s linear infinite;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />

<header>
  <a href="" class="logo">
    <img src="https://placehold.jp/0352ab/0352ab/68x41.png" alt="logo" width="68" height="41.125" />
  </a>
  <nav>
    <ul>
      <li class="ALL"><a href="">ALL</a></li>
      <li class="MONO"><a href="">MONO</a></li>
      <li class="KOTO"><a href="">KOTO</a></li>
      <li class="etc"><a href="">etc.</a></li>
      <li class="current"><a href="">ABOUT</a></li>
    </ul>
  </nav>
  <div class="mb">
    <a href="">
      <img src="https://placehold.jp/0352ab/0352ab/29x20.png" alt="mail" width="29" />
    </a>
    <img class="balloon" src="https://placehold.jp/0352ab/0352ab/101x150.png" alt="balloon" width="101" />
  </div>
</header>

<!-- from this -->
<div class="wrap">
  <div id="content">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- page 1 -->
        <div class="swiper-slide">
          <div id="abme">
            <div class="left">
              <section class="name">
                <p class="title">aaaaa</p>
                <p class="data">aaaaaaaaaaaaaaaa</p>
              </section>
              <section class="spec">
                <p class="title">aaaaaaa</p>
                <p class="data">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
              </section>
              <section class="skill">
                <p class="title">aaaaaaa</p>
                <ul class="data">
                  <li class="tool">
                    <figure class="Illustrator">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
                      <figcaption>Illustrator</figcaption>
                    </figure>
                    <figure class="Photoshop">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
                      <figcaption>Photoshop</figcaption>
                    </figure>
                    <figure class="Indesign">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
                      <figcaption>Indesign</figcaption>
                    </figure>
                    <figure class="Vectorworks">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
                      <figcaption>Vectorworks</figcaption>
                    </figure>
                    <figure class="Shade">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
                      <figcaption>Shade</figcaption>
                    </figure>
                  </li>
                  <li class="code">
                    <figure class="HTML">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
                      <figcaption>HTML</figcaption>
                    </figure>
                    <figure class="CSS">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
                      <figcaption>CSS</figcaption>
                    </figure>
                    <figure class="Javascript">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
                      <figcaption>Javascript</figcaption>
                    </figure>
                    <figure class="PHP">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
                      <figcaption>PHP</figcaption>
                    </figure>
                  </li>
                </ul>
              </section>
              <section class="hobby">
                <p class="title">aaaaaa</p>
                <p class="data">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x479.png" alt="me" width="411" />
            </div>

            <div class="right">
              <section class="attributes">
                <p class="title">aaaaaaaaaaa</p>
                <p class="data">aaaaaaaaaaaaaaaa</p>
                <p class="data">aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </p>
              </section>
              <section class="live">
                <p class="title">aaaaaa</p>
                <div class="data">
                  <img src="https://placehold.jp/0352ab/0352ab/193x202.png" width="193" />
                  <span class="data">aaaaaa</span>
                  <div class="ripple"></div>
                </div>
              </section>
            </div>

          </div>
        </div>


        <!-- page 2 -->
        <div class="swiper-slide">
          <div id="abmm">
            <div class="left">
              <section class="mm">
                <p class="title">aaaaaaaa</p>
                <p class="data">aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </p>
              </section>
              <section class="Q">
                <p class="title">aaaaaaaaaaaaaaaaaaa</p>
                <p class="data"><br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x411.png" alt="What's OTune?" width="411" />
            </div>

            <div class="right">
              <section class="theme">
                <p class="title">aaaaa</p>
                <p class="data">aaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </p>
              </section>
            </div>

          </div>
        </div>


        <!-- page 3 -->
        <div class="swiper-slide">
          <div id="abee">
            <div class="left">
              <section class="ee">
                <p class="title">aaaaaaaaaaaaaaaaaa</p>
                <p class="data">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x76.png" alt="What's this?" width="411" />
            </div>

            <div class="right"></div>

          </div>
        </div>

      </div>
      <!-- /swiper-wrapper -->
    </div>
    <!-- /swiper-container -->
  </div>
  <!-- /content -->
</div>
<!-- /wrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

添加：当前的JS代码

/* swiper */
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  autoHeight: false,  // here 1
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
  renderBullet: function(index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  },
});

/* height alignment ( I want to get the height set by this to the swiper ) */
$(function maxHeight() {  // here 2
  var maxh = 0;
  var conh = 'calc(100vh - 79px)';
  $(".left, .middle .right").each(function() {
    if ($(this).height() <= conh) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({
          'height': 'calc(' + conh + ' - 100px)',
          'justify-content': 'space-between'
        });
        $(".middle").css('height', conh);
      } else {
        maxh = $(".left, .right").height();
        $(".left, .middle .right").height(maxh);
      }
    }
  });
});

// here 3
document.querySelector('.swiper-wrapper').style.height = maxHeight();

1 个答案:

答案 0 :(得分：0)

将autoHeight设置为false，然后使用设置您的首选高度

document.querySelector('.swiper-wrapper').style.height = 'heightYouWant'

或添加属性高度，如下所示：

autoHeight: false,
height: 500,
相关问题
最新问题