javasriptでcss操作 -$('要素').css('プロパティ','値');がうまくいかない

Question

どこかで見つけた $('要素').css('プロパティ','値'); を用いて、
javascriptでスタイル操作をしたいのですがうまくいきません。

どこが間違ってるでしょうか？
また、これ以外にいい方法とかありますか？

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="style.js"></script>
<a  id="picture1"><img src="http://newgame-anime.com/assets/character/th-c1.png" alt="New Game"  id=img1 class="menu" ></a>

//style.js

$(function () {
   var W=screen.width;
   var H=screen.height;
   var img1=document.getElementById(img1); 
   //$('要素').css('プロパティ','値');
   $("img1").css("top","0 px");
   $("img1").css("left","0 px");
   $("img1").css("width","50 px");
    });

初心者ですみません・・

あと、使われている絵に関しては気にしないでくださいｗ
（私的利用なので・・・）

Answer 1

• attributeの値は必ずシングルクオートかダブルクオートで囲む必要があります。idがそうなっていません。

<img src="http://newgame-anime.com/assets/character/th-c1.png" alt="New Game" id="img1" class="menu">

• 変数と文字列を混同していませんか？

var img1=document.getElementById(img1); 

ではなく

var img1 = document.getElementById("img1"); 

としたかったのだと思います。

• .css("top","0 px")はスペースを空けずに.css("top","0px")としてください。

• どうせなら#img1の取得もjQueryを使って

var img1 = $("#img1");
img1.css("top","0px")
    .css("left","0px")
    .css("width","50px");

とすればいいと思います。

Answer 2

    $("#img1").css("top", "0px");
    $("#img1").css("left", "0px");
    $("#img1").css("width", "50px");

要素の指定方法は、CSSと同じような書き方になります。
id名で要素を指定するならば、この場合、"#img1"ですね。
ピクセルの数字と"px"はくっ付けましょう。

同じ要素に、複数のプロパティを設定するときは、下記のような表記が可能です。

    $("#img1").css({
    	top   : "0px",
    	left  : "0px",
    	width : "50px"
    });

Answer 3

idで要素を探す場合、$('#img1')だけで大丈夫です。わざわざ別にDOMで検索する必要はありません。