javascript – Return CSS property values ​​$ (object) .css ("margin")

Question:

You need to return some of the CSS properties of the HTML page element in a readable way for Edge, IE. Specifically: you need to return the padding and margin values ​​of an element and apply them to animate other elements.
this !== object

$(this).animate({
    width: "toggle",
    margin: $(object).css("margin"),
    padding: ($(object).css("padding"))
}, time, "linear");

This construct works in Chrome, but is completely useless in Edge and IE. If you specify values ​​with hands like "2px 10px", everything works out. Is it possible to do otherwise?



SOLUTION : for IE and Edge, it is worth taking the values ​​for each side separately and then concatenating into the required parameter string.



UPD1: I read the API, it turns out that $ (object) .css (propertyName) returns a string like значение (without quotes). It turns out that Edge and IE don't understand. Added quotes at the ends, i.e. "\" "+ $ (object) .css (propertyName) +" \ "" After that, a string of the form "значение" obtained. In this form, all three browsers began to be understood in the same way, but none of them works correctly, namely, it does not stretch those margins and margins that were reduced with the help of animation before stretching the animation.

UPD2: Sequence of actions: 1. Press twice on "ddd" 2. Press twice on any other element.

 $(document).ready(function() {
       var time = 200;
       var delay = time + 100;

       $(".icon-language").click(function() {
         slide($(".rightBlockMenu i"), $(this), time);
         $(".hidden").delay(delay).animate({
           width: "show"
         }, time, "linear");
       });
       
       $(".icon-search-1").click(function () {
        slide($(".rightBlockMenu i"), $(this), time);
      });

    $(".icon-user-o").click(function () {
        slide($(".rightBlockMenu i"), $(this), time);
    });

    $(".icon-basket").click(function () {
        slide($(".rightBlockMenu i"), $(this), time);
    });
})

function slide(selector, object, time) {
       if (selector.not(object).css("display") != "none") {
         selector.not(object).animate({
           width: "hide",
           margin: "0px -1px",
           padding: "9px 0px"
         }, time, "linear");
         $(object).animate({
           margin: "0"
         }, time).addClass("active_i");
       }
       if (selector.not(object).css("display") == "none") {
         selector.each(function (){
           if ($(this).is(selector.last())) {
             $(this).animate({
               width: "show",
               margin: "0 0 0 6px",
               padding: "\"" + $(object).css("padding") + "\""
             }, time, "linear");
             $(this).removeClass("active_i");
           } else {
             $(this).animate({
               width: "show",
               margin: "0 6px",
               padding: "9px 18px"
             }, time, "linear", function() {
               if ($(this).is(selector.first())) {
                 $(this).css("margin-left", "0");
               }
             });
             $(this).removeClass("active_i");
           }
         });
     }
     }
.header_top {
  height: 100px;
  position: relative;
}

.rightBlock {
  max-height: 100%;
  padding-right: 10px;
  float: right;
  right: 0;
  text-align: right;
}

.rightBlockMenu {
  color: hsla(0, 0%, 80%, 1);
  font-size: 2.7em;
  vertical-align: middle;
  display: inline-block;
}

.rightBlockMenu i:last-child {
  margin-right: 0;
}

.rightBlockMenu i:first-child {
  margin-left: 0;
}

.rightBlockMenu i:hover {
  color: hsla(0, 70%, 45%, 1);
  cursor: pointer;
}

.rightBlockMenu i {
  padding: 9px 18px;
  margin: 0 6px;
  vertical-align: bottom;
  border: 1px solid hsla(0, 0%, 80%, 1);
  display: inline-block;
}

.active_i {
  color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
  <div class="rightBlock">
    
    <div class="rightBlockMenu">
      <i class="icon-language">aaa</i>
      <i class="icon-search-1" >bbb</i>
      <i class="icon-user-o" >ccc</i>
      <i class="icon-basket" >ddd</i>
    </div>
  </div>
</div>

Answer:

First, bring all className to a single form. .rightBlockMenu .header_top .icon-search-1

What the hell is that? where is the uniform rule for writing styles.

it is better to use properties not directly, but write classes, and then connect and disconnect them if there are more than one properties: elem.classList.add (); elem.classList.remove (); elem.classList.toggle (); if one css property is optional.

You have a lot of text, but based on the title question, in order to reset the css property, you need to apply "" to it. And then it will become either what is written in your external styles, or by default (a browser property). generally remove ghjcnj from the style = "" attribute;

Scroll to Top
AllEscort