javascript - Setting inline css transition style with string alters the true value. Bizarre -

-

I have a stylesheet that sets up a CSS transition property such as (prefix versions for short): < / P> 

  Infection: Opacity 1s;   
 Then I have several elements on the page, and I want to modify the  transition-delay  property of each element through javascript, giving a conflict effect for . I am using jQuery like this:  
  $ (element). Css ('transition-delay', delay + 's'); However, the above code adds an inline  transit-delay: x  to the  No  element, instead, the result is:   
 / P> 
  & lt; Div style = "transition: xs;" & Gt;   
 But that's okay, because it works as expected, the browser knows that  transition: Xs  actually means that just the code To process, set  transition-delay  and retain the rest.  
 However:  
 If I now meet the inline style of that element through the  $ (element) .attr ('style') , and After that it is re-applied to the element,  $ (element) .attr ('style', style) , HTML  exactly  looks identical, but the transition is completely identical Overwrites other properties and essentially the transition value of the element to  all xs 0s ease .  
 Before  // html - working & gt; Div style = "transition: xs" & gt; // so I do this var style = $ (l) .attr ('style'); $ (L) .attr ('style', style); // After HTML - broken! & Lt; Div style = "transition: xs" & gt;   
 Demo  
 One JSDell I've described:  
 What's going on?   
 
 
 I think that just writing the question and that demo really helped me find answers: < / P> 
 HTML  style  attribute  not  is the actual style we need to use the CSSStyleDeclaration object  
 although it seems that inline style Which is as simple as  style = "... ..." in the HTML attribute (as I had eclipse), it turns out that this is not the case behind the scenes, inline style (And all other genres) are actually defined by an object in this object,  >  displays  string in the attribute, but defines a style in it Not all the information required for is included.  
 This is the reason that setting "El.style =" width: 100px; " no  works by:  
 
 Except in Opera, Styles can not be set by specifying the string for the property of the property (read only), as elt.style = "color: blue;" The reason for this is that the style attribute gives a CSSStyleDeclaration object. Instead, you can set the style property of this type:   
  elt.style.color = "blue"; // Directional Saint = Elite Style; St.color = "blue"; // indirectly   
 then it shows us why  $ (el) .attr ('style', 'transition: Xs');  Why  no  do the required work - and this is what I was walking on. This will  be  modify the built-in CSSStyleDeclaration object, but the way we want it (hence my basic question) is not always.  
 The solution is to use the provided API as CSSStyleDeclaration. The following problem proved me important in understanding this problem:  
 Copying a CSSStyleDeclaration:  
  var original style = el.cloneNode (). Style;   
 Here we are using the clonnode () method because otherwise (if we just get the L. style) the CSSStyleDeclaration object is copied by reference, which is what I do not want Because I'll change the inline style of the element and then I want to restore the original style later. Before cloning the element, we are allowed to get a "fresh" copy of CSSStleDeclaration which will not be able to change the inline styles of our element  L .  
 Saved CSSStyleDeclaration by changing the existing inline style  
  // First we need to remove all style rules / present (var i = el.style.length; I> 0; i--) {var name = el.style [i]; El.style.removeProperty (name); } // Now let us loop through the original CSSStyleDeclaration // object and set each property to its original value (var i = original style.length; i & gt; 0; i--) {var name = original style [I]; El.style.setProperty (name, originalStyle.getPropertyValue (name), priority = original style .getPropertyPriority (name)); }   
 Demo  
 This is an update to my original demo which implements the above methods:

Comments

Post a Comment

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

-
I have a SKScene where I am adding an SKSpriteNode I have subclassed the SKSpriteNode class to create this node. In the subclass I am defining some SKActions on Sprite. What do I want to do when the end of this phantom ends the SKAction sequence, then I add a new Prayer node to this scene. How is this possible. The following code is mine: The code for the sequence is that I'm running on the Scansprinitode subclass (TEMissileNode): - SKAction * moveDown = [SKAction moveToY: Self.position.y - 20 Duration: 0.2]; SKAction * animation = [SKAction animateWithTextures: textures timePerFrame: time / 7]; SKAction * moveMissileProjectile = [SKAction Moving: Pointoffscreen Term: Time]; SKAction * group = [SKAction group: @ [animation, movement projectile]]; SKAction * Sequence = [SKAction Sequence: @ [Hilldown, Group, [SKAction removalFromParent]]]; [Self run action: sequence]; From the main scene, I call those actions that execute these tasks TEMissileNode * missile = [tmissil...
Read more

Matlab transpose a table vector -

-
An embarrassing simple question seems to be, but how can I move a Matlab table vector? aTableT = aTable '; I tried a standard syntax for the simple interaction of a line vector to a line vector aTable : ATableT = reshape (aTable, 1, Height (aTable)); and aTableT = rot90 (aTable); According to the head, the last time table should work for table, see. However, I get this error code: Error type in using table / permit (line 396) Undefined function 'permute' for the input arguments. Error in rot 90 (line 29) b = magnitude (b, [2 1 3: ndims (a)]); NB: fliplr is not useful either pretty sure I have covered clear angles - any ideas? Thanks! Try changing your table into an array, move it, then back to a table In other words, try doing this: aTableArray = table2array (aTable); ATableT = array 2table (aTableArray. '); I have also read the document for rot90 , and it says that rot90 is definitely working for tables Do, and I find you...
Read more

c# - Textbox not clickable but editable -

-
I have a small form with 10 text boxes, I have set them in the correct tab order. I want them on my tab service I was wondering if there is a way to set the text box so that they can be selected for editing until they are tabbed. That is ... I do not want the end user to edit the text box to click on them, I just want to make them editable through tabu. this should do the trick public partial category poor text box: Text Box {Safe Override Zero WndProc (Ref: Message Message) {if (m.msg == (Int) WM.LBUTTONDOWN) {Return; // mount down events} base.WndProc (ref m); }} Window message enum can be found. How to do this without anherizing: text box : class EatMouseDown: netwindows {safe override zero WndProc (ref message message) {if (m.msg == (int) WM.LBUTTONDOWN) {return; } Base.WandProc (Ref M); }} Safe Override Zero Onload (EventEurge E) {base.OnLoad (e); How to do this without any part: left a clean part, whatever is important, this can be a buggy but it works R...
Read more