not overriding css transform style using js? - javascript

I've got different elements each with a different transform property,
.one{transform: rotateY(10deg)}
.two{transform: rotateY(20deg)}
//etc.
and I'm tryng to add a translateZ (through javascript) to these transform properties.
As expected adding such a value automatically overrides the pre-existing property .
Is there an easy way to get this done?
(as a workaround I thought about using transform-origin but I'd rather avoid that if it's possible)

As long as you're trying to do it only once you could just concat those string like
newTransform = element.style.getPropertyValue("transform") + "translateZ(..px)"
If you're trying to do it multiple times you'd need to check and probably replace within your style-string if there's already a translateZ value.

Related

Why is the style property empty of this HTMLStyleElement?

I have an html string that I getting from a backend server.
I am trying to view css properties and extract the value of a first occurrence of a background-color in a HTMLStyleElement. However the format of the HTMLStyleElement is different than I expected.
How might I find the first occurrence of the property in the css without searching through the string if possible?

Is it possible to get multi pseudo-element to using javascript?

Actually, I want to get multiple pseudo-element to using querySelectorAll.
I read some of the related articles there all of the developers say we haven't access to use querySelectorAll to get multiple pseudo-element.
We can get just one element to use querySelector and code like the bellow the code.
const textAfter = window.getComputedStyle(
document.querySelector(".text-after"), ":after"
).getPropertyValue("color")
console.log(textAfter)
But sometimes our project purpose needs to use multiple selectors.
So, that's why have anyone experienced in here? who can help to solved this problem?
Thanks to #All
Reverse the order. Instead of trying to compute the properties of a list of elements, for each element in the list, compute the properties for each single element:
const elements = Array.from(document.querySelectorAll(`.text-after`));
const allOfThem = elements.map(element =>
window.getComputedStyle(element, ":after").getPropertyValue("color")
);
console.log(allOfThem);
(We use Array.from here, because while an HTMLCollection comes with .forEach, it does not come with .map so we need to force it into being a real array before we do our mapping)

JS querySelectorAll and a regular expression as selector

I wish to write something like:
var N = document.querySelectorAll("input[id^='left"+/^[0-9]*$/+"right']").length;
How do I do in JS / JQuery?
You can't. Attribute selectors do not support regexp. You can select based on prefix and suffix, though:
[id^="left"][id$="right"]
If you want to exclude elements with IDs missing the digits in between left and right, you'll have to filter them out:
Array.from(queryResults).filter(elt => /^left\d*right$/.test(elt.id));
In general, however, using IDs with complex internal structure is often not the best approach. You will have to keep constructing them and picking them apart. Consider using classes and/or data attributes, or it's often the case that if you are creating the elements yourself, you can just remember the elements and reference them directly.

How do I retrirve the transform value of a translate attribute when using getAttribute?

How do I retrieve the transform value of a translate attribute when using getAttribute?
If I use setAttribute so create a transform on an object such as in the code below,
document.getElementById("Dots").setAttribute('transform','translateY(100)');
how do I later retrieve only the translate values using .getAttribute('transform');
Using getAttribute only retrieves the last transformation. I want specifically only the value of the translateY().
http://jsfiddle.net/slayerofgiants/4v7Yn/3/
Any ideas how I might go about accomplishing this?
Thanks,
--christopher
Your second statement override the first one so you never get the translateY value.
See UPDATED DEMO HERE
document.getElementById("Dots").setAttribute('transform','translateY(100) skewX(60)');
alert(document.getElementById("Dots").getAttribute('transform').split(' ',1));
You can then use split() to get the specific value you want.

jPicker change color transparent + get object

I'm using jPicker,I have 2 Questions.
1.How can I change the color to the transparent one? Already tried using
$.jPicker.List[0].color.acive.val('hex','FFFFFF',this)
-> Found this , not sure if the best solution
$.jPicker.List[0].color.acive.val('ahex','00000000',this)
2.Other is how can access without using the "index", like a selector.
For example something like:
$('selector').color.active.val('hex','FFFFFF',this) -> just an idea
this is Chris Tillman, and I kinda (completely) wrote the plugin you're using. To accomplish the first question, just run
$.jPicker.List[0].color.active.val('a', 0, this);
That will set just the alpha value for the active color.
If you want to get to the DOM element without using the List, just set it equal to a variable at instantiation like so.
var MyPicker = $('selector').jPicker()[0];
Just remember the index location at the end as the jPicker ALWAYS returns the result of $('selector').each(). If you are using one selector call for three different pickers, you can forget the index call at the end and get to each on using MyPicker[0], MyPicker[1], MyPicker[2] ... The $.jPicker.List[] is a master collection list for ALL instances of the picker, where this solution will ONLY index the pickers created by that individual call.
This method is a bit more complicated but you can check this answer to get the actuall ID
https://stackoverflow.com/a/27445752/2307326

Categories