jsで要素のアニメーションの制作をしました。
1、cssが left: calc(100% - 100px);ではないと動かなくなるのはなぜでしょうか?
※right:0;とかでは動かなくなる。
2,ボタンの onclick="clickTest()ではなくjsにdocument.getElementById("").onclick = function() {
と書いたら動かなくなるのはなぜですか?
以下コード
<style>
#anime_test{
height: 100px;
width: 100px;
background-color: #F44336;
position: relative;
left: 0;
transition: 3s;
}
#anime_test.act {
background-color: #2196F3;
left: calc(100% - 100px);
}
#anime_test-btn {
margin-top: 10px;
display: inline-block;
padding: 5px 10px;
border: solid 1px;
cursor: pointer;
}
</style>
<body>
<div id="anime_test">
</div>
<div id="anime_test-btn" onclick="clickTest();">
ボタン
</div>
<script>
document.getElementById("anime_test-btn").onclick = function() {
function clickTest() {
target = document.getElementById("anime_test");
if (target.className == null || target.className=="") {
target.className = "act";
} else {
target.className = "";
}}
};
</script>
本来のコードでは
document.getElementById("button").onclick = function() {
はないもので動いていました。
No.2ベストアンサー
- 回答日時:
No1です。
>色が赤から青になるのですが中盤は紫になっています。
>ブラウザの仕様でしょうか?
普通に色相環で考えれば、赤と青の中間は紫です。
ですので、特に「ブラウザの仕様」というほどの特殊な話ではないと思いますけれど?
CSSアニメーションの属性値の変化は、基本的に連続値として変化させるものです。
(その点では、色はサイズや寸法などとは異なるので、少々特殊と言えますけれど)
中間の色をいろいろとコントロールしたければ、@keyframesを利用することで可能です。
また、RGBではなくHSLで変化させれば、また別の印象にもなることでしょう。
https://developer.mozilla.org/ja/docs/Web/CSS/@k …
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
No.1
- 回答日時:
こんにちは
いろいろ問題点がありますね。
1.
position:relativeで指定しているので、初期表示状態は right:0 と同等です。
それを、right:0 までアニメーションしても、変化はないので移動はしません。
初期状態を right:0 として、.act の方を right: calc(100px - 100% ) などとしておけば、left の場合と同様の動きになります。
2.
element.onclick = function() {~~
を実行すると、HTMLのタグ内に記された " onclick="clickTest();" が、function{~~} で上書きされます。
一方で、ご提示の function 内では関数の定義(=clickTest)しか行っていないので、ボタンを押すたびに、関数定義が繰り返されるだけで、実質的には何も実行されません。
ご提示のような記述方法で動作させたいのなら、
document.getElementById('anime_test-btn').onclick = function() {
document.getElementById('anime_test').classList.toggle('act');
};
などの記述に変えれば、動作するものと考えられます。
なお、この場合にはHTMLタグ内の記述は不要です。
(どうせ上書きされてしまうので、意味がない。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
【Tabキー】特定の範囲内だけで...
-
テキストボックスがブランクの...
-
ブラウザに応じたJavaScriptの...
-
フレームでページ内検索機能
-
同じIDで定義した要素の配列を...
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
C#テキストボックスの文字を配...
-
window.openでタイトル名の指定
-
functionから別のfunctionを実...
-
クリッカブルマップのリンク部...
-
JAVAスクリプトで指定時間以降...
-
undefinedを表示させない方法は...
-
Vb.netのグローバル変数の宣言...
-
googleスプレッドシートのApps ...
-
シンプルなweb版スタンプラリー...
-
DOM要素を削除しても、イベント...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
HTML:Tableタグに対し、JavaScr...
-
JavaScriptでオブジェクトを取...
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
javascript 特定のタグのidの存...
-
配列の大括弧と丸括弧はどう違う?
-
javascriptであるボタンを押す...
-
「nullまたはオブジェクトでは...
-
div要素内の全input要素をdisable
-
onclickを使わずにイベント処理...
-
画像上のクリックした場所が分...
-
RadioButtonListの表示制御
-
javascriptで自動計算フォーム...
おすすめ情報
ありがとうございます。
正常に動きました。
ボタンをクリックすると要素が端から端に移動し色が赤から青になるのですが
中盤は紫になっています。
ブラウザの仕様でしょうか?