chrome 브라우저에서 현재 inpyt type="range"속성의 range의 범위는 숫자로 표기되지 않습니다.

chrome 브라우저에서 range의 현재 value값을 보여줄 수 있는 jQuery입니다. 표기하고 싶을때 사용할 수 있는 jQuery를 소개해 드리겠습니다.


<style>

.controller .tbl .range-slider__value{

display:none;

}


@media screen and (-webkit-min-device-pixel-ratio:0){

.controller .tbl .range-slider__value{

display: inline-block;

position: relative;

width:45px; 

padding:5px; 

margin:0 0 0 8px; 

font-size:13px; 

color: #444; 

text-align: center; 

background:#e3f1fe;}

}

</style>  /*chrome 브라우저에서만 사용할 수 있도록 hack적용*/


<script type="text/javascript">

var rangeSlider = function(){

  var slider = $('.range-slider'),

      range = $('.range-slider__range'),

      value = $('.range-slider__value');

    

  slider.each(function(){


    value.each(function(){

      var value = $(this).prev().attr('value');

      $(this).html(value);

    });


    range.on('input', function(){

      $(this).next(value).html(this.value);

    });

  });

};


rangeSlider();

</script>


<div class="range-slider">

  <input class="range-slider__range" type="range" value="100" min="0" max="500">

  <span class="range-slider__value">0</span>

</div>








스크립트를 적용하면 위와같이 range의 범위설정에따라 span영역에 숫자가 움직입니다.



저작자표시 비영리 변경금지

'JavaScript > 초급 JS' 카테고리의 다른 글

getElementById생략하기  (0) 2018.01.29
자바스크립트로 css효과 주기 (inline과 class방식의 차이)  (0) 2018.01.29

1. script를  body 영역에 넣기


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .redTxt{color:red}

        .blueTxt{color:blue}

        .greenTxt{color:green}

    </style>

</head>

<body>

    <p id="changeText">클릭한 버튼의 색에따라 문장이 바뀝니다</p>

    <p><button type="button" id="rBtn">빨강</button></p>

    <p><button type="button" id="bBtn">파랑</button></p>

    <p><button type="button" id="gBtn">초록</button></p>

    

    <script type="text/javascript">

        rBtn.onclick = function(){

            document.getElementById("changeText").className = "redTxt";

        }

        bBtn.onclick = function(){

            document.getElementById("changeText").className = "blueTxt";

        }

        gBtn.onclick = function(){

            document.getElementById("changeText").className = "greenTxt"

        }


    </script>

</body>

</html>


body영역 마지막에 script를 넣을 시 "id"직접 불러와 이벤트를 적용할 수 있다.


2. script를  head영역에 넣고 마지막에 실행하기


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .redTxt{color:red}
        .blueTxt{color:blue}
        .greenTxt{color:green}
    </style>
    <script type="text/javascript">
      window.onload = function(){  //페이지를 다 읽은 뒤 script를 실행해라!
        rBtn.onclick = function(){
            document.getElementById("changeText").className = "redTxt";
        }
        bBtn.onclick = function(){
            document.getElementById("changeText").className = "blueTxt";
        }
        gBtn.onclick = function(){
            document.getElementById("changeText").className = "greenTxt"
        }
      }
    </script>
</head>
<body>
    <p id="changeText">클릭한 버튼의 색에따라 문장이 바뀝니다</p>
    <p><button type="button" id="rBtn">빨강</button></p>
    <p><button type="button" id="bBtn">파랑</button></p>
    <p><button type="button" id="gBtn">초록</button></p>


HTML과 JS는 순차적으로 실행하는 언어로 window.onload = function()   실행문이 없을 시 문장이 제대로 실행되지 않는다.


저작자표시 비영리 변경금지

'JavaScript > 초급 JS' 카테고리의 다른 글

input type="range" 크롬에서 value 표시  (0) 2018.02.06
자바스크립트로 css효과 주기 (inline과 class방식의 차이)  (0) 2018.01.29

자바스크립트를 이용하여 css효과를 사용할 때의 inline방식과 class방식의 차이점을 알아보겠습니다.


1. inline방식의 자바스크립트 css효과


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        function changeColor(){

            document.getElementById("changeText").style.color = "red"; //inline방식

        }

    </script>

</head>

<body>

    <p id="changeText">클릭한 버튼의 색에따라 문장이 바뀝니다</p>

    <p><button type="button" onclick="changeColor()">빨강</button></p>

</body>

</html>


document.getElementById("id").style.color = "변수"; 를 사용하면 



위의 사진과 같이 style="color:red"로 inline형식의 css가 적용된 것을 확인할 수 있습니다.

inline방식의 css사용 시 여러가지의 style을 적용 할 때  중복된 문장을 여러번 사용해야하는 번거로움이 있습니다.


   function changeColor(){

           document.getElementById("changeText").style.color = "red"; //글자색을 바꾼다

  document.getElementById("changeText").style.background = "blue"; //배경색을 바꾼다

  document.getElementById("changeText").style.fontSize = "14"; //글자크기를바꾼다

        }





2. class방식의 자바스크립트 css효과


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .txtStyle{color:red; background:blue; font-size:14px;}

    </style>

    <script type="text/javascript">

        function changeColor(){

            document.getElementById("changeText").className="txtStyle"; //class 방식

        }

    </script>

</head>

<body>

    <p id="changeText">클릭한 버튼의 색에따라 문장이 바뀝니다</p>

    <p><button type="button" onclick="changeColor('')">빨강</button></p>

</body>

</html>


위의작성된 코드처럼 class를이용하여 style을 적용하였을 경우 class하나만을 사용하여도 다양한 효과를 얻을 수 있습니다.



저작자표시 비영리 변경금지

'JavaScript > 초급 JS' 카테고리의 다른 글

input type="range" 크롬에서 value 표시  (0) 2018.02.06
getElementById생략하기  (0) 2018.01.29

+ Recent posts

티스토리툴바