We Keep Coding

How to change the align attribute of image tag using javascript?

I was not able to change the align attribute value of image tag () for my even oddth child of parent div and I browsed but I did not found any thing regarding my issue but then I resolved it by my own.
Here is the Code
const children = document.getElementById('parent').children;
for (var i=0; i<children.length; i++){
let newImg=children[i].children[2];
if(i%2==0){
newImg.align="left";
console.log(newImg.attributes.align)// to check the output in console
}
else{
newsImg.align="right";
console.log(newsImg.attributes.align) // to check the output in console
}
}

To add an html attribute or modify the value of an existing html attribute from javascript use Element.setAttribute()
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute
Align attribute in a img tag is deprecated.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-align

How to get the default colors of a link?

I need some JavaScript to find the default link color of a page. How do I do it? I looked around but not sure how to do it. I believe jQuery has a .css function I can use but how about regular JavaScript?
Please note I don't have any specific element to target to grab css from, i.e. I can't look for the a color value for #myID -- I need to find the default a color value for the links on the page.
Thanks!

Try: Just place an <a> at the top of your page. This will get the values from the first <a> element.
Without any pseudo elements
window.getComputedStyle(document.body.getElementsByTagName('a')[0], null).getPropertyValue("color");
active
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':active').getPropertyValue("color");
hover
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':hover').getPropertyValue("color");
If you have any fears, just go with:
var el = document.createElement('a'); // Creates <a>
document.body.appendChild(el);
var COLOR = window.getComputedStyle(el).getPropertyValue("color");
document.body.removeChild(el);

You can create an element and add it to html, then get the CSS properties of the element that is assigned by default. Example:
var element = document.createElement('a');
document.documentElement.appendChild(element);
var color = getComputedStyle(element).color;
console.log(color) //rgb(0, 119, 204) stackoverflow default link color
Try this on StackOverflow page, opening the console.
Demo

How can I get the css file text via javascript?

If I have a style tag on my page with css in it and I write the following javascript I will get the css text of all style tags.
//compatibility: all
$("style").each(function () {
alert($(this).text());
});
I want to get the same text from all link element css files, like the following script.
//compatibility: IE Only
$("link").each(function(){
alert(this.sheet.cssText);
});
Is there a cross modern browser friendly version of the above script?

Another way to access a CSS rule without actually accessing the stylesheet is to create an element, apply a rule to it and then access its properties with jQuery. Something like this:
var NewElement = $('.SomeClass');
var TheHeight = NewElement.prop('height');
Not sure if this would help but it's an idea. What are you trying to do anyway?
Edit:
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';
This is from the answer here I added a jsFiddle Note that you must select the correct stylesheet index.

The only possible solution is to use AJAX:
$("link").each(function(){
$.get(this.href, function(css){
alert(css);
});
});
Or you can use document.styleSheets
You can iterate over the style sheets:
var styleSheets = document.styleSheets;
for(var i = 0; i < styleSheets.length; i++){
alert(styleSheets[i].cssRules)
}

How can I apply a function to several images in jQuery?

I need a little help with (probably) something really simple.
I want to use a script which converts images from color to grayscale.
I got it working partially — the first image turns gray, but the second won’t.
I know this is because an id cannot be used multiple times:
var imgObj = document.getElementById('grayimage');
I tried this:
var imgObj = $(’.grayimage’)[0];
But it didn’t work. Changing it to getElementByClass also does not work. (Before people ask, I did change the id to class in the <img> tag.)
I really could use some help here. Thanks in advance!

$('.grayimage').each(function(idx,imgObj){
<do your code here>
});

$('.grayimage') gives you a list of all elements with grayimage as a class. If you add '[0]' you're accessing the first element, so any changes you make will apply to only the first image that it finds with this class.
You should loop through all elements:
var images = $('.grayimage');
for(i = 0; i < images.length; i++) {
var image = images[i];
// Do stuff
}

YUI Button apply by class name

Is it possible to apply / create a YUI Button by using an element's class name and not by id. I have to generate a list of buttons then transform it to a YUI button.
[Update]
By the way, I'm trying to apply the button in an anchor tag. So it will be a link button.
[Update:Code]
Ok so here's the code. I have a loop that generates this anchor tag.
<a class="system-button" href="/system/edit/12">Edit</a>
wrumsby's answer perfectly makes sense. But I don't know why it doesn't work. I tried debugging it and the elements are successfully fetched. But it seems that no YUI Buttons are created.
I even tried generating unique ids for the elements but still no luck.
Any ideas?

Looks like I've solved it myself. But I'm not sure if this is the best solution. I generated unique ids then create the buttons.
var i = 0;
$(".system-button").each(function(i,b){
var button = new YAHOO.widget.Button($(b).attr('id','system-button'+i).attr('id'));
i++;
});
And oh yes, I use JQuery here. That framework is so awesome.

You should be able to use the srcelement configuration attribute like so:
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
Button = YAHOO.widget.Button;
Event.onDOMReady(
function() {
var elements = Dom.getElementsByClassName('...');
for (var i = 0; i < elements.length; i++) {
var button = new Button({
srcelement: elements[i],
...
});
...
}
}
);
})();