根据选择的单选按钮放大h1

Question

当选择/选中单选按钮时，整个网页中的h1需要放大或缩小，具体取决于用户选择/检查的无线电选项，我有以下代码：

<form id="title_size_options" action="">
  
	<input type="radio" onClick="document.getElementsByTagName('h1').style.zoom = '80%';" id="font_size_h1_small" name="title_size_option_choice" value="title_size_option_one">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  
	<input type="radio" onClick="document.getElementsByTagName('h1').style.zoom = '100%';"  name="title_size_option_choice" value="title_size_option_two" Checked="yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  
	<input type="radio" onClick="document.getElementsByTagName('h1').style.zoom = '130%';"  name="title_size_option_choice" value="title_size_option_three">


</form>

我不想使用.style.fontSize =“50px”调整文本大小 - 或类似JS代码 - 因为整个页面中的h1元素大小不同。

谢谢 - 非常感谢任何帮助

Answer 1

你可以这样做。

var currentZoom = 1.0;

    $(document).ready(function () {
        $('#btn_ZoomIn').click(
            function () {
                $('#divName').animate({ 'zoom': currentZoom += .1 }, 'slow');
            })

    });