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

https://teratail.com/questions/95471?whotofollow=
で、javasriptでスタイルを変更することには成功しましたが、変数を混ぜるためにはどうすればよいでしょうか？

html
1 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
2 <script src="style.js"></script>
3  <a  id="picture1"><img src="gazou.png" id="img1" class="menu" ></a>
4   
5

javascript
1$(function () {
2    // 画面幅
3    var W=screen.width;
4    // 画面高
5    var H=screen.height;
6    $("#img1").css({
7        position: "absolute",
8        top   : "H/10px",
9        left  : "W/10px",
10        width : "W/10px"
11    });
12
13      });

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんが想像する動作は以下のように行うことができると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<a id="picture1">
9    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=gazou.png" id="img1" class="menu">
10</a>
11<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
12<script>
13    $(function () {
14        // 画面幅
15        var W = screen.width;
16        // 画面高
17        var H = screen.height;
18        $("#img1").css({
19            position: "absolute",
20            top: H / 10 + "px",
21            left: W / 10 + "px",
22            width: W / 10 + "px"
23        });
24    });
25</script>
26</body>
27</html>