รับ Margin Value of: after selector ใน jQuery [duplicate]

Question

ฉันกำลังทำงานกับแถบเลื่อนแบบกำหนดเองฉันมีตัวบ่งชี้สไลด์มากมาย ควรมีเส้นสีส้มระหว่าง 2 ตัวบ่งชี้เช่นถ้าฉันคลิกที่ตัวบ่งชี้ 1 จะมีเส้นระหว่างตัวบ่งชี้ 1 และ 2 และถ้าฉันคลิกตัวบ่งชี้ 2 จะมีเส้นระหว่าง 2 และ 3 เป็นต้นไป สำหรับบรรทัดนี้ฉันใช้: after selector รหัส CSS:

.carousel-indicators li:after{
    content: "";
    width: 20px;
    height: 3px;
    background: orange;
    top: 28%;
    left: 1%;
    position: absolute;
    display: inline-block;
}

รหัส HTML: -

 <!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
<!-- Carousel Indicators End -->

ฉันคำนวณแล้วว่าถ้าเราย้ายจากตัวบ่งชี้ที่ 1 เป็นตัวบ่งชี้ที่ n ฉันต้องเพิ่มระยะขอบ 6% ทางด้านซ้าย ฉันต้องการทำสิ่งนี้ด้วยความช่วยเหลือของ jQuery เช่นถ้าฉันย้ายจากตัวบ่งชี้ที่ 1 ไปที่ n ฉันจะเพิ่ม% 6 ในระยะขอบซ้ายก่อนหน้า (1 + 6 = 7%) ในทำนองเดียวกันถ้าฉันย้ายจาก 2 เป็น 3 แล้วฉัน จะเพิ่ม% 6 ในระยะขอบซ้ายก่อนหน้า (7 + 6 = 13%) และอื่น ๆ แต่ที่นี่ฉันต้องได้ระยะขอบซ้ายก่อนหน้านี้เพื่อที่ฉันจะได้ทำการคำนวณ / เพิ่มเติมได้ ฉันจะรับได้อย่างไร: หลังจากตัวเลือกระยะขอบซ้าย? ฉันลองใช้รหัสต่อไปนี้ แต่มันไม่ได้กำหนดให้ฉัน

$('.carousel-indicators li').click( function (){ margLeft = $('.carousel-indicators li:after').css('margin-left');
        console.log(margLeft);
    });

และ

$('.carousel-indicators li').click( function (){ margLeft = $('.carousel-indicators li:after').css('marginLeft');
        console.log(margLeft);
    });

บอทกำลังให้ผลลัพธ์ที่ไม่ได้กำหนด

Answer 1

ลองสิ่งนี้แทน

หากต้องการรับระยะขอบขององค์ประกอบหลังโดยใช้getPropertyValue()กับgetComputedStyle()

เกี่ยวกับ getComputedStyle()

Window.getComputedStyle()วิธีการส่งกลับวัตถุมีค่าของทุก CSS คุณสมบัติขององค์ประกอบที่หลังจากใช้สไตล์ชีตที่ใช้งานและการแก้ปัญหาการคำนวณขั้นพื้นฐานใด ๆ ค่าเหล่านั้นอาจมี ค่าคุณสมบัติ CSS แต่ละรายการเข้าถึงได้ผ่าน API ที่ออบเจ็กต์จัดเตรียมไว้หรือโดยการสร้างดัชนีด้วยชื่อคุณสมบัติ CSS

เกี่ยวกับ getPropertyValue()

CSSStyleDeclaration.getPropertyValue()อินเตอร์เฟซที่ใช้วิธีการส่งกลับ DOMString ที่มีค่าของคุณสมบัติ CSS ที่ระบุ

window.getComputedStyle(this, ':after').getPropertyValue('margin-left');

คุณจะไม่ได้รับขอบซ้ายไป.carousel-indicators li:afterจึงได้รับ0px

$('.carousel-indicators li').click( function (){
    var marginLeft = window.getComputedStyle(this, ':after').getPropertyValue('margin-left');
    console.log(marginLeft)
});

.carousel-indicators li:after{
  content: "";
  width: 20px;
  height: 3px;
  background: orange;
  top: 28%;
  left: 1%;
  position: absolute;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
<!-- Carousel Indicators End -->

ฉันเพิ่ม margin-left:20px

.carousel-indicators li:after{
  margin-left:20px
}

$('.carousel-indicators li').click( function (){
    var marginLeft = window.getComputedStyle(this, ':after').getPropertyValue('margin-left');
    console.log(marginLeft)
});

.carousel-indicators li:after{
  content: "";
  width: 20px;
  height: 3px;
  background: orange;
  top: 28%;
  left: 1%;
  position: absolute;
  display: inline-block;
  margin-left:20px
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
<!-- Carousel Indicators End -->