We Keep Coding

When i use ref to nuxt-link, i can't change styles on it (Nuxt.js)

In my function I am using ref, which is binded to link, and when I try to change color (ref.style.color = 'red'), I see a error. Because ref which is binded to nuxt-link is Object, and it hasn't style property. I know that I can use the tag <a></a>, but does someone has ideas how can i make it with nuxt-link?
More info:
I have a link
<nuxt-link
ref="card"
#mousemove.native="move"
#mouseleave.native="leave"
#mouseover.native="over">
Click
</nuxt-link>
In my function i want to change link position, useng transform.
move () {
const card = this.$refs.card
card.style.transform = `perspective(500px)`
}
End i get this message in console
TypeError: Cannot set properties of undefined (setting 'transform')

By selecting nuxt-link using $refs will only return Vue Component instead of node element due to nuxt-link is a component in Nuxt.js.
The correct way to selecting node element is using $el.
Answer referred from here.
Example:
const card = this.$refs.card.$el
card.style.transform = `perspective(500px)`
To be mentioned, I'm not sure what you trying to achieve but assuming you want to modify the style of an element in Vue way, you are supposed to use :style="theElementStyles" then only you update the element style with this.theElementStyles = { transform: 'perspective(500px)' }.
More details about inline style binding can check on Vue documentation.

How to change a background that is declared in .css not html

USING JAVASCRIPT, NO JQUERY
Hi all,
I know this is a basic one but I am hitting a dead end.
I want to change a background image that is in the .css, not the html so I cant give it an id. I managed to remove the image using:
var headerImg = document.getElementById('header').background = 'none';
And tried :
var headerImg = document.getElementById('header').background = 'images/new-header.jpg;
But that did'nt work.
I have no idea how to change the Image, and in the dev tools the url does not even change when I try to run my code Any help would be great, Thanks.

You're close. You're just off on the syntax slightly...
document.getElementById("header").style.backgroundImage = "url(images/new-header.jpg)";
It's a style attribute you're changing, so you need .style and then you use the CSS attribute name, but remove hyphens and camelCase the attribute name, so .backgroundImage.

Can you try this
var element = document.getElementById('content');
element.style.backgroundImage = "url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzOpUTzDIq2yutn75PQTLcHhJ06MTZPsV_V-0M918xKUhAqMxE')";
<div>
<p>this is unchanged</p>
<p id="content">backgroud wiil be cange</p>
<div>

Removing image src attribute

Removing the src attribute on an image tag doesn't seem to redraw the view on iOS(7) or Android (KitKat). Neither does changing the attribute to a blank value. Desktop browsers work as expected.
This DOES remove the attribute but the view doesn't reflect the change:
$('#imgPreview').removeAttr('src');
This DOES change the attribute but the view doesn't reflect the change:
$('#imgPreview').attr('src','');
If the attribute is changed to a valid image path, the view DOES update:
$('#imgPreview').attr('src','http://some/image/path.jpg');
I have a simple test case HERE that shows the issue.
Is there a way that I can force a redraw after changing the src attribute to a blank value or removing the src attribute altogether?

You could force element redraw using this kind of snippet:
$.fn.redraw = function(){
return this.hide().show(0);
};
Or maybe better:
$.fn.redraw = function(){
return this.each(function(){
var zIndex = $(this).css('z-index');
$(this).css('z-index',-1).css('z-index',zIndex);
});
};
Then use it as e.g:
$('#imgPreview').removeAttr('src').redraw();

Script not creating <a> element

I am trying to add a link to a page I cannot directly access the HTML on, aside from the footer. Using Javascript, I am attempting to use the createElement() method. I have successfully used the same process to create a link element in the header.
function createForgotPasswordLink(){
var pwlink=document.createElement("a")
pwlink.setAttribute("id", "forgotPssLink")
pwlink.setAttribute("href", "http://www.mysite.com/page.aspx")
pwlink.innerHTML("Forgot Password?")
document.getElementsByTagName("body")[0].appendChild(pwlink)
}
createForgotPasswordLink();
The only difference between the two scripts is that when making the link element, I appendChild() on the head not body and I do not set the innerHTML of the link element as I have done in the above a element. For some reason, the above code does not work. Even after removing line 5.

You are using the property .innerHTML like a method. Don't use parens, use an =. Also, I wouldn't bother setting the attributes, just set the property values directly. The code is more straightforward and easier to read:
function createForgotPasswordLink() {
var pwlink = document.createElement("a");
pwlink.id = "forgotPssLink";
pwlink.href = "http://www.mysite.com/page.aspx";
pwlink.innerHTML = "Forgot Password?";
document.body.appendChild(pwlink)
}

JavaScript removeChild not working

I am using this JavaScript code to remove a couple elements from the page, but it's not working. When I inspect the code with Opera Dragonfly it says something like:
Uncaught exception: Error: WRONG_ARGUMENTS_ERR
and points to the file and function name.
The weird thing is that I use the exact same code in another function on the same page and it works without problem. The code is very small and simple:
var docBody = document.getElementById("body");
if(document.getElementById("marginDiv")){
docBody.removeChild("marginDiv");
}
Both body and marginDiv exist on the page. My goal is to make the thumbnails disappear when one clicks the background.

You're trying to remove a string. A string is hardly an HTML element. You're also relying on marginDiv being a direct child of body, which may not be the case.
Instead, try this:
var remove = document.getElementById('marginDiv');
if( remove) remove.parentNode.removeChild(remove);

Try
docBody.removeChild(document.getElementById("marginDiv"));

removeChild needs a reference to a DOM element, not a string. Try this:
var docBody = document.getElementById("body");
var marginDiv = document.getElementById("marginDiv");
if(marginDiv)){
docBody.removeChild(marginDiv);
}

if(document.getElementById("marginDiv")){
docBody.removeChild("marginDiv");
}
you have to check if specified element exist marginDiv exist, then removechild(...)