Javascript document.querySelector just need the value - javascript

my webpage excerpt looks like this
<div class="current-timestamp" style="--duration:"00:13:19"; --absolute-position:"00:00:00";"><span class="position"></span><span class="divider"></span><span class="duration"></span></div>
i try to get the value 00:13:19 via the chrome console with this command
document.querySelector(".current-timestamp");
however i receive the full code like above.
What do i need to do to just receive "00:13:19" ?

It's not common to store the value of a component in a CSS variable like you have done, however it can be accessed in the following way:
getComputedStyle(document.querySelector(".current-timestamp")).getPropertyValue("--duration");
Essentially, we are getting the computed style of the element in question, and then using getPropertyValue to get the value of the duration variable on the element.
However, I would highly advise against using CSS variables for storing non-style related values in the future.
Edit: This can actually be done using the style property directly, as this is set on the element itself:
document.querySelector(".current-timestamp").style.getPropertyValue("--duration");

Related

Getting different results from attribute.dataset and jquery .data() method

I was getting unexpected results and when I debugged into the problem, I found that I was not getting right data-attribute value by Jquery .data() method. It was pretty clear that value was not right and when I changed my code to attribute.dataset.name (native property of an element) It returned me the expected value.
here's the screenshot of an error
Any ideas, what could be the possible reason because I am using a lot of data-attributes in my situation and don't want to change the code everywhere I am accessing data-attributes by Jquery .date() method.
.data(prop) and .dataset[prop] can be different if:
The HTML dataset contains one value
jQuery's .data has been called on the element previously to store a value associated with the same key
Example:
$('div').data('foo', 'newFooVal');
console.log($('div').data('foo'));
console.log($('div')[0].dataset.foo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-foo="oldFooVal"></div>
jQuery's .data will retrieve:
Any previous value set with .data (which will be completely unrelated to the dataset)
If no previous value has been set to that key with that element, the value for that key in the dataset will be returned
So you have to be careful with what setting and retrieving. It's admittedly not entirely intuitive, since it'll do something different in different situations.

Polymer Custom Element Shadow DOM issues

I am attempting to use the Polymer shadow DOM " $ " object.
document.querySelector("recent-activity-section").$
This code should return an object that looks like this:
Object {recent-activity-section: section#recent-activity-section, recent-activity-div: div#recent-activity-div, list: core-list#list}
In fact, using the Chrome Dev Tools console, it does.
However, inside of the "created" function in the javascript file that goes along with my custom element, I get the following:
undefined
Perhaps I'm using something wrong?
Instead of using the created method, which is one of the first ones triggered in the element's lifecycle, you would probably have more luck using domReady, which is, according to Polymer official docs:
Called when the element’s initial set of children are guaranteed to exist. This is an appropriate time to poke at the element’s parent or light DOM children.

Assigning DOM style to var

For some reason if I type in:
var i = document.getElementById('fake').style.backgroundPosition;
I get undefined.
However,
document.getElementById('fake').style.backgroundPosition;
by itself, returns the right answer.
Any ideas?
When I use that line of code on an element that actually exists in Chrome, I get i equal to an empty string. You can see that here in this jsFiddle: http://jsfiddle.net/jfriend00/b6syd/.
So, if you are getting undefined, then probably your object "fake" doesn't exist when you're running the code.
element.style.backgroundPosition will only return to you an actual inline style settings or programmatically values set for that particular object directly. It won't return computed styles from stylesheets. If you want to get the current style setting for that attribute, then you need to use something like this:
var i = window.getComputedStyle(document.getElementById('fake'), null).getPropertyValue('background-position');
And, it's different in IE. This is where a framework like jQuery or YUI is very useful.
In jQuery, it would just be this:
var i = $("#fake").css('backgroundPosition');

Control references in jQuery

function eegetdropdownvalue_str(ctl){return ctl.selectedIndex>=0&&ctl[ctl.selectedIndex]?ctl[ctl.selectedIndex].value:''}
The above function is called with
co.p1A10=eegetdropdownvalue_str(document.formc.p1A10);
I want to switch the call over to jQuery to drop the document.form reference however doing this
co.p1A10=eegetdropdownvalue_str($('p1A10'));
Does not reference the control correctly - How should I do this?
There's two things wrong with your code.
First, $('p1A10') references nothing.
jQuery selectors work almost identically (if not completely identically) to the way css works.
So, just ask yourself how you would reference the object(s) in question in CSS and you're half way there.
I'm assuming that p1A10 is the name or id of an object. Since we're using CSS/jQuery syntax, this should be an id, although you can select by other attributes such as $("select[name='p1A10']") .
To reference an object by ID we use the # character (again, just like in CSS). So we can select your node via $('#p1A10').
The second problem is that your function is expecting a DOM object not a jQuery object. To keep your code intact, we need to say $('#p1A10')[0] where 0 is the first element within the collection of jQuery elements.
I've provided two examples to explain this a little better. One uses your existing infrastructure and one replaces it.
http://jsfiddle.net/TD6Uu/5/
Hope it helps.
Given a form with id formc and a select with name p1A10 you could e.g. use:
o.p1A10 = eegetdropdownvalue_str($('#formc select[name="p1A10"]').get(0));
If this doesn't do it, please provide use with the exact HTML structure

Javascript appendChild name property

So I'm trying to add attributes to a radio button input, specifically the name attribute in Javascript. I'm appending children to a main object and when I use Object.setAttribute("name", value); and subsequently check the innerHTML of the appended input, it does not even contain a name property at all!
I'm guessing I'm missing something simple or there is a way around it but I've been wrestling with this problem for quite a while with no success. I tried accessing the property directly using Object.name = value and Object.nodeName = value (that one was a random try).
Is there some sort of problem in which IE6's javascript rendering engine does not recognize setAttribute("name", value)? Is there a way around it?
Here's a workaround for dealing with IE:
http://javascript.about.com/library/bliebug2.htm
http://www.thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/
Essentially, the method used is to create the elements on the fly instead of modifying existing elements.
In IE, you cannot add a name attribute on dynamically created objects.
I suggest using id if unique, or a class if not.

Categories